关键词：
【中文标题】Nuxt.js 仅客户端组件【英文标题】：Nuxt.js Client-Side Only Component 【发布时间】：2021-04-11 15:25:32 【问题描述】：我在我的 Nuxt.js 项目中使用 plotly.js，但在导入 plotly.js 时，我一直收到错误消息 document not defined。 Nuxt.js 文档没有提供关于如何仅在客户端加载和生成组件的明确说明。
【问题讨论】：
虽然有几个类似的问题，但没有一个给出完整的解决方案，只有拼凑起来才能解决问题的部分。 【参考方案1】：要解决这个问题，您正在使用的组件必须放在client-only 环境中：
<client-only>
<component ...></component>
</client-only>
此外，您需要将组件的 .vue 文件存储在 Nuxt.js 自动创建的 components 目录之外的其他位置，因为在构建过程中，Nuxt.js 会自动收集所有这些文件以便捆绑它们，这将为组件内的 plotly.js 调用import。我创建了一个名为components-lazy 的目录并将组件放在那里。
最后，您必须延迟导入页面、布局或父组件中的组件，您打算在其中使用它。我为此任务使用了以下语法：
export default
...
components:
Plotly: () => import('@/components-lazy/Plotly'),
...
...
这将确保此特定组件仅在客户端导入和呈现。
【讨论】：
Nuxt.js 中的组件可以与 Next.js 类似的客户端渲染和服务器渲染混合使用吗？
】Nuxt.js中的组件可以与Next.js类似的客户端渲染和服务器渲染混合使用吗？【英文标题】：CanyoumixupClientrenderingandServerrenderingforcomponentsinNuxt.jssimilartoNext.js?【发布时间】：2021-08-2707:47:41【问题描述】：在Next.js中，您可以在同一页... 查看详情
Vue.js 和 Nuxt.js
...式之间的可见性为0%。问题：如何注册全局组件。如何在客户端行为的某些用户上切换nuxt中的布局。在哪里编写vue.use(somep 查看详情
vue-awesome-swiper使用教程
...么是Nuxt.js:Nuxt.js是一个基于Vue.js的通用应用框架，通过对客户端/服务端基础架构的抽象组织，预设了利用Vue.js开发服务端渲染的应用所需要的各种配置。（开箱即用）官方地址：https://zh.nuxtjs.org/guideⅡ.Nuxt安装使用Ⅲ.Nuxt模板目... 查看详情
Nuxt.js：理解 <nuxt-child> 组件
】Nuxt.js：理解<nuxt-child>组件【英文标题】：Nuxt.js:understanding<nuxt-child>component【发布时间】：2019-03-0923:53:44【问题描述】：在Nuxt.js中，我做了这个文件夹结构：├──parent│ ├──child1.vue│ └──child2.vue├──par... 查看详情
如何在 nuxt.js 上从子组件获取父组件的值？
】如何在nuxt.js上从子组件获取父组件的值？【英文标题】：HowtogetanvaluefromChildcomponenttoParentonnuxt.js?【发布时间】：2019-11-3022:31:48【问题描述】：我一直在尝试将数据从子A($emit)组件传递给父组件，从父组件传递给子B(props)。使用n... 查看详情
如何使用 Nuxt.js 从缓存中排除组件？
】如何使用Nuxt.js从缓存中排除组件？【英文标题】：HowtoexcludecomponentfromcachingusingNuxt.js?【发布时间】：2021-08-1411:18:15【问题描述】：我正在尝试在Nuxt.js中使用Vue.jskeep-aliveprop，我正在尝试缓存除一个之外的所有组件，这是我想... 查看详情
如何使用 Nuxt.js 仅在一个组件中使用插件？
】如何使用Nuxt.js仅在一个组件中使用插件？【英文标题】：HowtouseplugininonlyonecomponentusingNuxt.js?【发布时间】：2021-11-1617:45:13【问题描述】：我正在用nuxt.js做一个简单的博客网站，我只需要在一个组件中导入编辑器，我不想使用n... 查看详情
Nuxt.js 本地站点页面仅在登陆时从 Strapi 加载数据，而不是通过 <nuxt-link> 导航
】Nuxt.js本地站点页面仅在登陆时从Strapi加载数据，而不是通过<nuxt-link>导航【英文标题】：Nuxt.jslocalsitepagesloaddatafromStrapionlyonlanding,notnavigatingvia<nuxt-link>【发布时间】：2020-05-0812:13:09【问题描述】：我正在使用来自Strapi... 查看详情
使用 Nuxt.js 从页面组件的 asyncData() 方法调用 mixin 函数
】使用Nuxt.js从页面组件的asyncData()方法调用mixin函数【英文标题】：CallmixinfunctionfromasyncData()methodofthepagecomponentwithNuxt.js【发布时间】：2019-08-0816:17:38【问题描述】：我可以用Nuxt.js从页面组件的asyncData()方法调用mixin函数吗？我的... 查看详情
如何通过 Nuxt.js 服务器从 Nuxt.js 客户端发送请求并将响应接收回客户端
】如何通过Nuxt.js服务器从Nuxt.js客户端发送请求并将响应接收回客户端【英文标题】：HowtosendarequestfromNuxt.jsclientoverNuxt.jsserverandreceivetheresponsebacktotheclient【发布时间】：2020-03-2220:31:31【问题描述】：我正在开发一个Vue.js应用程序... 查看详情
Nuxt.js + Bootstrap-Vue - 加载单个组件和指令
】Nuxt.js+Bootstrap-Vue-加载单个组件和指令【英文标题】：Nuxt.js+Bootstrap-Vue-Individualcomponentsanddirectivesloading【发布时间】：2018-12-1711:16:25【问题描述】：我正在努力将Bootstrap-Vue库集成到我的基于Nuxt.js的项目中。我通读了officialdocument... 查看详情
nuxt.js入门安装及灵活使用(代码片段)
...次请求5.4、使用fetch发送ajax5.5、插件：自定义axios5.1客户端5.5.2服务端5.5.3插件配置总结6、Vuex状态树6.1根模块数据操作6.2其他模块数据操作6.3完整vuex模板7、nuxt流程总结1、案例入门1.1、create-nuxt-app介绍Nuxt.js提供了脚手架工具... 查看详情
如何向 Nuxt.js 添加客户端脚本？
】如何向Nuxt.js添加客户端脚本？【英文标题】：HowtoAddClient-sideScriptstoNuxt.js?【发布时间】：2018-06-2312:39:34【问题描述】：我一直在阅读Nuxt.js关于插件的文档和用于添加脚本的配置nuxt文件。我都试过了，但没有运气。我正在尝试... 查看详情
我想为 vue.js (nuxt.js) 中的每个组件加载和填充数据
】我想为vue.js(nuxt.js)中的每个组件加载和填充数据【英文标题】：Iwanttoloadandpopulatethedataforeachcomponentinvue.js(nuxt.js)【发布时间】：2017-11-2807:56:44【问题描述】：我按如下方式启动项目。vueinitnuxt/express我的目录是...components|-slider.vu... 查看详情
nuxt.js的学习路由组件的学习(代码片段)
...周期流程图分析1、异步加载数据asyncDataasyncData方法会在组件（限于页面组件） 查看详情
Nuxt.js 的 s-s-r 兼容组件库
】Nuxt.js的s-s-r兼容组件库【英文标题】：s-s-rcompatibleComponentsLibraryforNuxt.js【发布时间】：2021-03-0200:08:23【问题描述】：我是一名后端工程师，我已经开发了几个月的副项目，现在是时候创建前端了。我不太精通前端的东西，做前... 查看详情
为 Nuxt.js 编写客户端 API 库
】为Nuxt.js编写客户端API库【英文标题】：Writingclient-sideAPIlibrariesforNuxt.js【发布时间】：2018-07-2519:44:31【问题描述】：这更像是一个架构/设计问题，而不是“为什么这不起作用”。我正在编写一个由外部API(ExpressJS)提供支持的Nuxt... 查看详情
Nuxt.js 中的“文档未定义”
...布时间】：2018-02-1323:03:02【问题描述】：我正在尝试在Vue组件中使用Choices.js。组件编译成功，但随后触发错误：[vue-router]无法解析异步组件默认值：ReferenceError:文档未定义在我看到的浏览器中：ReferenceError文档未定义我认为这与... 查看详情