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
```
Run Code Online (Sandbox Code Playgroud)
其次，您需要在plugins目录下创建一个插件文件，例如：vue-datepicker.js具有以下内容：
```
import Vue from 'vue'
import Datepicker from 'vuejs-datepicker'
Vue.component('date-picker', Datepicker)
```
Run Code Online (Sandbox Code Playgroud)
在此步骤中，您将date-picker在组件的上下文中注册，从导入vuejs-datepicker，此名称很重要，因为您将使用原始datepicker.
下一步是注册您的新插件 nuxt.config.js
```
plugins : [
          ...OthersPlugins,
           { src: '~/plugins/vue-datepicker', mode: 'client' }
          ] 
```
Run Code Online (Sandbox Code Playgroud)
通过这种方式，您将仅从客户端使用此组件。
最后一步是date-picker在组件或页面中使用Datepicker ，但现在使用第二步中使用的名称
```
<date-picker ..options/>
```
Run Code Online (Sandbox Code Playgroud)
您不需要在组件中导入任何内容，date-picker现在可以在项目中的每个组件或页面上使用它。
最后一步是可选的client-only，如果您想在加载日期选择器时显示任何消息，则使用标签包装此日期选择器。

有关这方面的更多信息，请阅读：