Nuxt.jsでプラグインやライブラリを特定のページでだけ読み込む方法について

Question

こんにちは。

Nuxt.jsでコンポーネントごとにプラグインやライブラリを読み込む方法について質問させてください。

前提

以下、例です。

plugins/vue-particles.jsを作成し、以下を記述

import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)

nuxt.config.jsで以下のように記述

export default {
//略
  plugins: [
    { src: '~/plugins/vue-particles', mode: 'client' }
  ],
//略

これで全ページでプラグインを読み込めるようになることは理解しました。

参考：https://ja.nuxtjs.org/guide/plugins/

そして、問題なく動いていることを確認しております。

お聞きしたいこと

先ほど例に挙げたvue-particlesプラグインに限らず、あらゆるプラグインについて質問です。

このように全ページで読みこむのではなく、特定のコンポーネントだけでプラグインを読み込むにはどうすればいいのでしょうか？

以下の2パターンを試しましたが、方法1は何も起こらず、方法2はUnexpected identifierのエラーが表示されました。

//example.vueに記述

//方法1：定義したプラグインを読み込み
<script>
export default {
  plugins: [
    { src: '~/plugins/vue-particles', mode: 'client' }
  ]
}
</script>

//方法2：直接ライブラリをインポート
<script>
import Vue from 'vue'
import VueParticles from 'vue-particles'
Vue.use(VueParticles)
</script>

削除済みの質問

Vue Particlesというライブラリを使ってパーティクルを表示しています。

公式サイト通りに進めて、パーティクルを表示することはできたのですが、nuxt.config.jsファイルで共通プラグインとして読みこんでいるせいで、このライブラリを使っていないページでページ遷移時にエラーが発生してしまいます。

エラーメッセージを見る限り、ファイルを読み込んでるけど、カスタムエレメントがなくて処理を実行できないよ…といったエラー内容かなと思います。

そこで、使っていないページでもこのプラグインで使うカスタムエレメントを読み込んでいるのですが、その場しのぎの方法のため深く理解するためにも質問させていただきました。

Comments

[mather]

> エラーメッセージを見る限り
失敗したページの内容とエラーメッセージを提示すべきだと思います。

[chef]

すみません、質問の仕方が悪かったみたいですね。そこのエラーメッセージはこの質問と直接関係ない部分ですので修正させていただきます。

[mather]

ん？解決したいことそのものを直球で書いたほうが良いですよ。
> 特定のコンポーネント（ファイル）でだけプラグインを読み込む方法や、ライブラリを読み込む方法についてお聞きしたいです。
これは特定のエラーを回避するための手段を聞いているのではないんですか？

[chef]

慣れていないもので、すみません。ご指摘いただきありがとうございます。
アドバイスを参考に質問内容をアップデートさせていただきました。