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

Question

---

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

---

首先。我的错误-
第一次加载页面时，我的“vuejs-datepicker”运行良好。
但是当我重新加载它时，出现“参考错误”...
my error screen

---

第二。我做了什么-

• 添加 /plugins/vuejs-datepicker 文件

  import Vue from 'vue';
  import Datepicker from 'vuejs-datepicker';
  
  Vue.use(Datepicker);
  

• 在 nuxt.config.js 中添加 plugins : [{ src: '~plugins/vuejs-datepicker', ssr: false }]

• 在模板中使用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 上不起作用。

我遇到了同样的问题，关注this guide我可以解决问题。

• 首先你必须安装组件

  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 的名称。

• 下一步是在nuxt.config.js注册你的新插件

  plugins : [
            ...OthersPlugins,
             { src: '~/plugins/vue-datepicker', mode: 'client' }
            ] 
  

  通过这种方式，您将只能从客户端使用此组件。

• 最后一步是在组件或页面中以date-picker 的身份使用您的日期选择器，但现在使用第二步中使用的名称

  <date-picker ..options/>
  

  您不需要在组件中导入任何内容，这个date-picker 现在可以在项目中的每个组件或页面上使用。

• 如果您想在日期选择器加载时显示任何消息，最后一步（可选）是使用client-only 标记包装此日期选择器。

有关此的更多信息，请阅读：

• configuration-plugins
• components-client-only

Answer 2

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

Answer 3

//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>