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導入，此名稱很重要，因為您將使用原始datepicker的 insted 名稱。

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

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

  這樣，您將僅從客戶端使用此組件。

• 最后一步是使用您的 Datepicker 作為組件或頁面中的date-picker ，但現在使用第二步中使用的名稱

  <date-picker..options/>

  你不需要在組件中導入任何東西，這個date-picker現在可以在項目中的每個組件或頁面上使用。

• 如果您想在日期選擇器加載時顯示任何消息，那么最后一步（可選）是使用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>