質問編集履歴
2
質問内容のアップデート
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -82,7 +82,11 @@
|
|
|
82
82
|
|
|
83
83
|
```
|
|
84
84
|
|
|
85
|
-
//
|
|
85
|
+
//example.vueに記述
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
//方法1：定義したプラグインを読み込み
|
|
86
90
|
|
|
87
91
|
<script>
|
|
88
92
|
|
1
質問内容をわかりやすく修正
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -2,39 +2,23 @@
|
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Nuxt.jsでコンポーネントごとにプラグインやライブラリを読み込む方法について質問させてください。
|
|
6
6
|
|
|
7
7
|
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
## 前提
|
|
10
10
|
|
|
11
11
|
|
|
12
12
|
|
|
13
|
-
|
|
13
|
+
以下、例です。
|
|
14
14
|
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
plugins/vue-particles.jsを作成し、以下を記述
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
## やったこと
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
公式サイト通りなのですが、以下の手順です。
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
```
|
|
21
|
+
```ここに言語を入力
|
|
30
|
-
|
|
31
|
-
//インストール
|
|
32
|
-
|
|
33
|
-
npm install vue-particles --save-dev
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
//vue-particles.jsファイルを作成して以下を記述
|
|
38
22
|
|
|
39
23
|
import Vue from 'vue'
|
|
40
24
|
|
|
@@ -42,31 +26,41 @@
|
|
|
42
26
|
|
|
43
27
|
Vue.use(VueParticles)
|
|
44
28
|
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
//nuxt.config.jsファイルで共通読み込み
|
|
48
|
-
|
|
49
|
-
plugins: [
|
|
50
|
-
|
|
51
|
-
{ src: '~/plugins/vue-particles', mode: 'client' }
|
|
52
|
-
|
|
53
|
-
|
|
29
|
+
```
|
|
54
30
|
|
|
55
31
|
|
|
56
32
|
|
|
57
|
-
|
|
33
|
+
nuxt.config.jsで以下のように記述
|
|
58
34
|
|
|
59
|
-
<template>
|
|
60
35
|
|
|
61
|
-
<div id="app">
|
|
62
|
-
|
|
63
|
-
<vue-particles color="#dedede"></vue-particles>
|
|
64
|
-
|
|
65
|
-
</div>
|
|
66
|
-
|
|
67
|
-
</template>
|
|
68
36
|
|
|
69
37
|
```
|
|
38
|
+
|
|
39
|
+
export default {
|
|
40
|
+
|
|
41
|
+
//略
|
|
42
|
+
|
|
43
|
+
plugins: [
|
|
44
|
+
|
|
45
|
+
{ src: '~/plugins/vue-particles', mode: 'client' }
|
|
46
|
+
|
|
47
|
+
],
|
|
48
|
+
|
|
49
|
+
//略
|
|
50
|
+
|
|
51
|
+
```
|
|
52
|
+
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
これで全ページでプラグインを読み込めるようになることは理解しました。
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
参考：[https://ja.nuxtjs.org/guide/plugins/](https://ja.nuxtjs.org/guide/plugins/)
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
そして、問題なく動いていることを確認しております。
|
|
70
64
|
|
|
71
65
|
|
|
72
66
|
|
|
@@ -74,7 +68,11 @@
|
|
|
74
68
|
|
|
75
69
|
|
|
76
70
|
|
|
77
|
-
|
|
71
|
+
先ほど例に挙げたvue-particlesプラグインに限らず、あらゆるプラグインについて質問です。
|
|
72
|
+
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
このように全ページで読みこむのではなく、特定のコンポーネントだけでプラグインを読み込むにはどうすればいいのでしょうか？
|
|
78
76
|
|
|
79
77
|
|
|
80
78
|
|
|
@@ -115,3 +113,23 @@
|
|
|
115
113
|
</script>
|
|
116
114
|
|
|
117
115
|
```
|
|
116
|
+
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
## 削除済みの質問
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
~~Vue Particlesというライブラリを使ってパーティクルを表示しています。~~
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
~~公式サイト通りに進めて、パーティクルを表示することはできたのですが、nuxt.config.jsファイルで共通プラグインとして読みこんでいるせいで、このライブラリを使っていないページでページ遷移時にエラーが発生してしまいます。~~
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
~~エラーメッセージを見る限り、ファイルを読み込んでるけど、カスタムエレメントがなくて処理を実行できないよ…といったエラー内容かなと思います。~~
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
~~そこで、使っていないページでもこのプラグインで使うカスタムエレメントを読み込んでいるのですが、その場しのぎの方法のため深く理解するためにも質問させていただきました。~~
|