Nuxtjs 使用组件 vue-pano

Question

我用过vue-pano with Nuxtjs 我有这个错误："window is undefined"

如果我这样导入：

<script>
import Pano from 'vue-pano'

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

所以我用了一个插件：

import Vue from 'vue'

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

但是我有错误:

[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.

如何使用 nuxtjs 安装 vue-pano？

谢谢！

Answer 1

要使用任何使用 window 或文档的 vue 插件，您需要将它们包装在 <no-ssr></no-ssr> 组件（由 nuxt 提供）中。

有

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

如果上下文是浏览器，则您正在全局注册组件。但是你想要做的是只在浏览器模式下导入它：

const noSSRComponents = {};

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

Nuxtjs 使用组件 vue-pano

Nuxtjs use component vue-pano

javascript

vue.js

nuxt.js