Nuxtでプラグインが使えない時の注意点

Vue.jsで使えるのにNuxtで使えない場合が多々あります。

解決のポイントはssrです。

プラグイン化する

まずはNuxtのプラグイン化を行います。

pluginsに適当名前のファイルを作成します。

plugins/your-plugin.js

内容は必要としているプラグインのドキュメントをご確認ください。

nuxt.config.jsでプラグインを指定します。

ssr: falseが肝です。

plugins: [
  { src: '~/plugins/vue-full-loading', ssr: false }
],

カスタムコンポーネントを<no-ssr>タグで囲みます。

<no-ssr>
  <loading
    :show="isLoading"
    label="loading">
  </loading>
</no-ssr>

それでもエラーが出る場合は?

Vue.use(PluginName)

としているところを

Vue.component(PluginName)

としてみましょう。

作り方が人それぞれなので、ハマる部分ではあります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です