Q:

Nuxtjs use component vue-pano

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!

A:

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,
    }
}

