Nuxt.js 仅客户端组件

Question

我在我的 Nuxt.js 项目中使用 plotly.js，但在导入 plotly.js 时，我一直收到错误，提示 document not defined。 Nuxt.js 文档没有提供关于如何仅在客户端加载和生成组件的明确说明。

Answer 1

要解决这个问题，您使用的组件必须放在 client-only 环境中：

<client-only>
    <component ...></component>
</client-only>

此外，您需要将组件的 .vue 文件存储在 Nuxt.js 自动创建的 components 目录之外的某个地方，因为在构建过程中，Nuxt.js自动收集所有这些文件以便将它们捆绑在一起，这将调用组件内的 import for plotly.js。我创建了一个名为 components-lazy 的目录并将组件放在那里。

最后，您必须延迟导入页面、布局或父组件中的组件，您打算在其中使用它。我为此任务使用了以下语法：

export default {
    ...
    components: {
        Plotly: () => import('@/components-lazy/Plotly'),
        ...
    }
    ...
}

这将确保此特定组件仅在客户端导入和呈现。

Nuxt.js 仅客户端组件

Nuxt.js Client-Side Only Component

vue.js

nuxt.js

plotly.js