[英]Nuxt.js document is not defined (vuejs-datepicker)
Second.第二。 what i did-
我做了什么-
add /plugins/vuejs-datepicker file添加 /plugins/vuejs-datepicker 文件
import Vue from 'vue'; import Datepicker from 'vuejs-datepicker'; Vue.use(Datepicker);
add plugins: [{ src: '~plugins/vuejs-datepicker', ssr: false }]
in nuxt.config.js添加
plugins: [{ src: '~plugins/vuejs-datepicker', ssr: false }]
在 nuxt.config.js
use client-only
in template在模板
client-only
<client-only> <datepicker:inline="true"></datepicker> </client-only>
Third.第三。 even did this-
甚至这样做-
Vue.use(Datepicker)
to Vue.component('vuejs-datepicker',DatePicker)
Vue.use(Datepicker)
更改为Vue.component('vuejs-datepicker',DatePicker)
components: {datepicker}
components: {datepicker}
components: {'datepicker': () => import('vuejs-datepicker')},
components: {'datepicker': () => import('vuejs-datepicker')},
You were almost there!你快到了!
It means that vuejs-datepicker doesn't work on SSR.这意味着 vuejs-datepicker 不适用于 SSR。
I faced the same issue and Following this guide I could resolve the problem.我遇到了同样的问题,按照本指南我可以解决问题。
First of all you must install the component首先你必须安装组件
npm i vuejs-datepicker
Secondly, you need to create a plugin file, under plugins
directory, for instance: vue-datepicker.js
with the following content:其次,您需要在
plugins
目录下创建一个插件文件,例如: vue-datepicker.js
,其内容如下:
import Vue from 'vue' import Datepicker from 'vuejs-datepicker' Vue.component('date-picker', Datepicker)
In this step you are registering as date-picker
in the context your component, imported from vuejs-datepicker
, this name is important because is the one you will use insted of the original datepicker
.在这一步中,您将在组件的上下文中注册为
date-picker
,从vuejs-datepicker
导入,此名称很重要,因为您将使用原始datepicker
的 insted 名称。
Next step is register your new plugin in nuxt.config.js
下一步是在
nuxt.config.js
中注册你的新插件
plugins: [...OthersPlugins, { src: '~/plugins/vue-datepicker', mode: 'client' } ]
In this way you will be using this component only from the client side.这样,您将仅从客户端使用此组件。
The final step is enjoy your Datepicker as date-picker
in your component or page, but now with the name used in the Second Step最后一步是使用您的 Datepicker 作为组件或页面中的
date-picker
,但现在使用第二步中使用的名称
<date-picker..options/>
You don't need to import anything in the component, this date-picker
now is available on every component or page in the project as it.你不需要在组件中导入任何东西,这个
date-picker
现在可以在项目中的每个组件或页面上使用。
The very Last step, which is optional is to wrap this date-picker with client-only
tag, if you want to show any message while the date-picker is loading.如果您想在日期选择器加载时显示任何消息,那么最后一步(可选)是使用
client-only
标签包装此日期选择器。
For more info about this please read:有关这方面的更多信息,请阅读:
It means vuejs-datepicker dont work on SSR.这意味着 vuejs-datepicker 不适用于 SSR。 You need to use it only on client.
您只需要在客户端上使用它。 See https://nuxtjs.org/api/components-client-only/ and https://nuxtjs.org/guide/plugins/#client-side-only
请参阅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.