[英]Nuxt.js document is not defined (vuejs-datepicker)
第二。 我做了什么-
添加 /plugins/vuejs-datepicker 文件
import Vue from 'vue'; import Datepicker from 'vuejs-datepicker'; Vue.use(Datepicker);
添加plugins: [{ src: '~plugins/vuejs-datepicker', ssr: false }]
在 nuxt.config.js
在模板client-only
<client-only> <datepicker:inline="true"></datepicker> </client-only>
第三。 甚至这样做-
Vue.use(Datepicker)
更改为Vue.component('vuejs-datepicker',DatePicker)
components: {datepicker}
components: {'datepicker': () => import('vuejs-datepicker')},
你快到了!
这意味着 vuejs-datepicker 不适用于 SSR。
我遇到了同样的问题,按照本指南我可以解决问题。
首先你必须安装组件
npm i vuejs-datepicker
其次,您需要在plugins
目录下创建一个插件文件,例如: vue-datepicker.js
,其内容如下:
import Vue from 'vue' import Datepicker from 'vuejs-datepicker' Vue.component('date-picker', Datepicker)
在这一步中,您将在组件的上下文中注册为date-picker
,从vuejs-datepicker
导入,此名称很重要,因为您将使用原始datepicker
的 insted 名称。
下一步是在nuxt.config.js
中注册你的新插件
plugins: [...OthersPlugins, { src: '~/plugins/vue-datepicker', mode: 'client' } ]
这样,您将仅从客户端使用此组件。
最后一步是使用您的 Datepicker 作为组件或页面中的date-picker
,但现在使用第二步中使用的名称
<date-picker..options/>
你不需要在组件中导入任何东西,这个date-picker
现在可以在项目中的每个组件或页面上使用。
如果您想在日期选择器加载时显示任何消息,那么最后一步(可选)是使用client-only
标签包装此日期选择器。
有关这方面的更多信息,请阅读:
这意味着 vuejs-datepicker 不适用于 SSR。 您只需要在客户端上使用它。 请参阅https://nuxtjs.org/api/components-client-only/和https://nuxtjs.org/guide/plugins/#client-side-only
//plugin.js
import Vue from 'vue';
import Datepicker from 'vuejs-datepicker';
Vue.use(Datepicker);
//nuxt.config.js
plugins : [
{ src: '~/plugins/plugin.js', ssr: false},
]
//usage
<div>
<client-only>
<Datepicker />
</client-only>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.