NuxtJS: external client-side only plugin/component causes error on page refresh

0
votes

I used npm install to include a client-side only plugin called vue-gallery and followed the instructions to load it as client-side only plugin as stated on the Nuxtjs docs. The plugin works fine with one exception: if I press f5 on any route that imports the plugin, Nuxt throws a 'Invalid or unexpected token' error. This is the error that is always thrown as when you would define the plugin as both client and serverside. The same happens if you type the URL directly in the browser. It does not happen however when you use the apps links to navigate to the page.

Note that this is just an external component type plugin, not a ES6 plugin.

vue-gallery.js

import Vue from 'vue'
import VueGallery from 'vue-gallery'      
Vue.component('vue-gallery', VueGallery)

nuxt.config.js

  plugins: [
    '~/plugins/axios',
    { src: '~/plugins/vue-gallery.js', mode: 'client' }
  ],

In my pages component simply doing import VueGallery from 'vue-gallery'

Anyway to resolve this?

1
vue.jsnuxt.js

1 Answers

2
votes

In my pages component simply doing import VueGallery from 'vue-gallery'

Thats the reason. If u import it in your pages it will be imported on SSR and so it will error, if its not SSR compatible. Since you are adding it globally as component in your plugin you dont need to import it in your pages