Repository: vue-gl/vue-gl (js)

Issue:
VueGL + Nuxt: Cannot read property 'trim' of undefined
I created a project with Nuxt (2.14.0), VueGL (0.22.0) and Three (0.117.1) packages. Then I created 3 pages, each one with a different VueGL example. Each page have only one section with `vgl-` components inside, all of they imported and exposed to the template. This is [the repository](https://github.com/ErickPetru/tdcsp2020-vuegl) of the project.

When in development (`yarn dev`), I receive an error when trying to navigate between pages with `$router.push` or `nuxt-link`: 

    TypeError: Cannot read property 'trim' of undefined
      at ze (vue-gl.esm.js?2692:1)
      at VueComponent.beforeDestroy (vue-gl.esm.js?2692:1)
      ...

Strangely, I have no error if I reload the page from scratch (i.e. <kbd>F5</kbd>) or even if I run the project from `dist` folder, after using `yarn generate` (as you can see it working without errors in [the deployed static site](https://tdcsp2020-vuegl.netlify.app/).


Pull request description:
Fix an error on beforeDestroy hook when the material prop is not defined
Resolves #977 

Patch:
diff --git a/src/mixins.js b/src/mixins.js
index 093c828..d01af95 100644
--- a/src/mixins.js
+++ b/src/mixins.js
@@ -37,7 +37,9 @@ export const VglObject3dWithMatarial = {
   },
   beforeDestroy() {
     const { vglNamespace: { materials }, material, setMaterial } = this;
-    parseNames(material).forEach((name) => materials.unlisten(name, setMaterial));
+    if (material !== undefined) {
+      parseNames(material).forEach((name) => materials.unlisten(name, setMaterial));
+    }
   },
 };
 


Test patch:
diff --git a/test/objects/vgl-mesh.spec.js b/test/objects/vgl-mesh.spec.js
index 59308b6..0160f39 100644
--- a/test/objects/vgl-mesh.spec.js
+++ b/test/objects/vgl-mesh.spec.js
@@ -1,6 +1,8 @@
 import Vue from 'vue/dist/vue';
 import { Mesh } from 'three';
-import { VglMesh, VglObject3d, VglNamespace } from '../../src';
+import {
+  VglMesh, VglObject3d, VglNamespace, VglMaterial,
+} from '../../src';
 
 describe('VglMesh', () => {
   let inject;
@@ -16,4 +18,18 @@ describe('VglMesh', () => {
     expect(Object.keys(new (Vue.extend(VglMesh))({ inject }).$props))
       .toEqual(expect.arrayContaining(Object.keys($props)));
   });
+  // #977
+  test('the parsing names should not be called when the material prop is not defined', async () => {
+    Vue.config.errorHandler = jest.fn();
+    const vm = new (Vue.extend(VglMesh))({ inject });
+    vm.$destroy();
+    await vm.$nextTick();
+    expect(Vue.config.errorHandler).not.toHaveBeenCalled();
+  });
+  test('the material prop can accept multiple material names', () => {
+    const { inst: mt1 } = new (Vue.extend(VglMaterial))({ inject, propsData: { name: 'mt1' } });
+    const { inst: mt2 } = new (Vue.extend(VglMaterial))({ inject, propsData: { name: 'mt2' } });
+    const { inst } = new (Vue.extend(VglMesh))({ inject, propsData: { material: 'mt1 mt2' } });
+    expect(inst).toHaveProperty('material', [mt1, mt2]);
+  });
 });