Nuxtjs use component vue-pano

Question

I used vue-pano with Nuxtjs I have this error : "window is undefined"

if I import like this:

<script>
import Pano from 'vue-pano'

export default {
  components: {
    Pano
  }
}
</script>

So I used a plugin:

import Vue from 'vue'

if (process.browser) {
  Vue.component('Pano', require('vue-pano'))
}

But I have error :

[Vue warn]: The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside <p>, or missing <tbody>. Bailing hydration and performing full client-side render.

[Vue warn]: Unknown custom element: <pano> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

How can I install vue-pano with nuxtjs ?

Thank you!

I think it is a problem with Pano, they probably don't precompile the templates when releasing a dist. If so, the solution would be to open an issue in their repo and ask them to do it. — acdcjunior

Paul Melero Paul Melero · Accepted Answer · 2018-04-08T10:15:46

to use any vue plugin that makes use of window or document, you need to wrap them in a <no-ssr></no-ssr> component (provided by nuxt).

With

if (process.browser) { Vue.component('Pano', require('vue-pano')) }

you are registering globally the component if the context is browser. But what you would like to do isntead is to import it only in browser mode:

const noSSRComponents = {};

if (process.browser) {
    const vuePano = require('vue-pano');
    noSSRComponents.vuePano = vuePano;
}
export default {
// ...
    components: {
        ...noSSRComponents,
    }
}

Nuxtjs use component vue-pano

1 Answers