Nuxt.js 文档未定义（vuejs-datepicker）

Question

我做了所有的事情（也许）来解决这个问题，但我的小错误不断出现....:(

第一的。我的错误

-我的“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>

第三。甚至这样做-

在 /plugins/vuejs-datepicker 文件中，

更改Vue.use(Datepicker)为Vue.component('vuejs-datepicker',DatePicker)

在Vue的脚本中，

更改components: {datepicker}

为components: {'datepicker': () => import('vuejs-datepicker')},

那么，我现在还应该做什么？？

有任何想法吗？

谢谢..

Answer 1

你快到了！这意味着 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，此名称很重要，因为您将使用 insted 的原始名称datepicker。下一步是注册你的新插件nuxt.config.jsplugins : [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...OthersPlugins,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ src: '~/plugins/vue-datepicker', mode: 'client' }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp;这样，您将仅从客户端使用此组件。最后一步是在组件或页面中使用 Datepicker date-picker，但现在使用第二步中使用的名称<date-picker ..options/>您不需要在组件中导入任何内容，date-picker现在可以在项目中的每个组件或页面上使用它。client-only如果您想在日期选择器加载时显示任何消息，最后一步（可选）是使用标签包装此日期选择器。

Answer 2

//plugin.js&nbsp; &nbsp;&nbsp;import Vue from 'vue';&nbsp;import Datepicker from 'vuejs-datepicker';&nbsp; &nbsp;&nbsp;&nbsp;Vue.use(Datepicker);//nuxt.config.jsplugins : [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{ src: '~/plugins/plugin.js', ssr: false},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ]&nbsp;//usage<div><client-only><Datepicker />&nbsp; &nbsp;&nbsp;</client-only></div>

Answer 3

这意味着 vuejs-datepicker 不适用于 SSR。您只需要在客户端上使用它。请参阅https://nuxtjs.org/api/components-client-only/和&nbsp;https://nuxtjs.org/guide/plugins/#client-side-only