vue-gl / vue-gl

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 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. F5) 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.

@ErickPetru Sorry for late reply.

The following line should not run when the material prop is undefined, it causes this error.

vue-gl/src/mixins.js

Line 40 in f8fc56a

parseNames(material).forEach((name) => materials.unlisten(name, setMaterial));

This should be fixed in the future releases.
To avoid the error for now, set the material prop explicitly. (Your first page has a mesh without the material prop. https://github.com/ErickPetru/tdcsp2020-vuegl/blob/1171755daf330fc6add20dfe057aefdfbe6de86b/pages/1.vue#L6)

VueGL + Nuxt: Cannot read property 'trim' of undefined