teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Nuxt.jsでvue-mdc-adapterを使いたい

編集履歴

質問編集履歴

7

material-components-vueについてを削除

2018/09/15 10:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -2,7 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- 現在Nuxt.jsでWebアプリを作成していて、UIフレームワークにvue-mdc-adapter（もしくはmaterial-components-vue）を使いたいと思っています
5
+ 現在Nuxt.jsでWebアプリを作成していて、UIフレームワークにvue-mdc-adapterを使いたいと思っています
6
6
 
7
7
 
8
8
 

6

nuxt-sass-resources-loaderについてを削除

2018/09/15 10:18

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -122,34 +122,4 @@
122
122
 
123
123
 
124
124
 
125
- ## その他試したこと
126
-
127
-
128
-
129
- nuxt-sass-resources-loaderを使って`node_modules/vue-mdc-adapter/dist/styles.scss`を読み込んでみましたが、スタイルが全く適用されませんでした。
130
-
131
-
132
-
133
- ```
134
-
135
- module.exports = {
136
-
137
- modules: [
138
-
139
- ['nuxt-sass-resources-loader', 'vue-mdc-adapter/dist/styles.scss']
140
-
141
- ],
142
-
143
- plugins: ['~/plugins/vue-mdc-adapter']
144
-
145
- }
146
-
147
- ```
148
-
149
-
150
-
151
- ---
152
-
153
-
154
-
155
125
  どなたかご教授いただければ幸いです。

5

nuxt-sass-resources-loaderに関する記述を追加

2018/09/03 12:05

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -122,4 +122,34 @@
122
122
 
123
123
 
124
124
 
125
+ ## その他試したこと
126
+
127
+
128
+
129
+ nuxt-sass-resources-loaderを使って`node_modules/vue-mdc-adapter/dist/styles.scss`を読み込んでみましたが、スタイルが全く適用されませんでした。
130
+
131
+
132
+
133
+ ```
134
+
135
+ module.exports = {
136
+
137
+ modules: [
138
+
139
+ ['nuxt-sass-resources-loader', 'vue-mdc-adapter/dist/styles.scss']
140
+
141
+ ],
142
+
143
+ plugins: ['~/plugins/vue-mdc-adapter']
144
+
145
+ }
146
+
147
+ ```
148
+
149
+
150
+
151
+ ---
152
+
153
+
154
+
125
155
  どなたかご教授いただければ幸いです。

4

pluginsのミスを修正

2018/09/03 11:51

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
@@ -30,11 +30,11 @@
30
30
 
31
31
  import Vue from 'vue'
32
32
 
33
- import Button from 'material-components-vue/dist/button'
33
+ import VueMDCAdapter from 'vue-mdc-adapter'
34
34
 
35
35
 
36
36
 
37
- Vue.use(Button)
37
+ Vue.use(VueMDCAdapter)
38
38
 
39
39
  ```
40
40
 

3

タグを追加

2018/09/03 11:32

投稿

退会済みユーザー
test CHANGED
File without changes
test CHANGED
File without changes

2

使いたいUIフレームワークをvue-mdc-adapterに変更 & 全体的に修正

2018/09/01 12:37

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Nuxt.jsでmaterial-components-vueを使いたい
1
+ Nuxt.jsでvue-mdc-adapterを使いたい
test CHANGED
@@ -2,11 +2,7 @@
2
2
 
3
3
 
4
4
 
5
- Nuxt.jsでサイトを作成しているのですが、Nuxtに[material-components-vue](https://github.com/matsp/material-components-vue)を組み込む方法がわかりません。
5
+ 現在Nuxt.jsでWebアプリを作成していて、UIフレームワークにvue-mdc-adapter（もしくはmaterial-components-vue）を使いたいと思っています
6
-
7
-
8
-
9
- NuxtでMaterial Components for the Webが使えれば何でもいいので、material-components-vueが使えない場合は[vue-mdc-adapter](https://github.com/stasson/vue-mdc-adapter)でも構いません。その場合も方法を教えてくださると嬉しいです。
10
6
 
11
7
 
12
8
 
@@ -22,19 +18,11 @@
22
18
 
23
19
 
24
20
 
25
- デベロッパーツールでコンソールを確認すると、以下の警告が表示されています。
26
-
27
-
28
-
29
- ![イメージ説明](92aed342416e6b4abf3c8c7f5eda2597.png)
30
-
31
-
32
-
33
21
  ## 現在のソースコード
34
22
 
35
23
 
36
24
 
37
- **plugins/material-components-vue.js**
25
+ ### plugins/vue-mdc-adapter.js
38
26
 
39
27
 
40
28
 
@@ -52,7 +40,7 @@
52
40
 
53
41
 
54
42
 
55
- **pages/index.vue**
43
+ ### pages/index.vue
56
44
 
57
45
 
58
46
 
@@ -68,15 +56,15 @@
68
56
 
69
57
  <script>
70
58
 
71
- // 省略
59
+ export default {}
72
60
 
73
61
  </script>
74
62
 
75
63
 
76
64
 
77
- <style lang="scss">
65
+ <style lang="scss" scoped>
78
66
 
79
- @import "material-components-vue/dist/button/styles"
67
+ @import "vue-mdc-adapter/dist/button/styles"
80
68
 
81
69
  </style>
82
70
 
@@ -84,17 +72,53 @@
84
72
 
85
73
 
86
74
 
87
- **nuxt.config.js**
75
+ ### nuxt.config.js
88
76
 
89
77
 
90
78
 
91
- - [webpack - Nuxt.jsでMaterial Components Webを使うときに、Sassファイルを読み込めない(126033)｜teratail](https://teratail.com/questions/126033)の回答の通りにwebpackを拡張（Sass Include Path）
79
+ ```js
92
80
 
93
- - pluginsにmaterial-components-vueを追加（`ssr: false`）
81
+ const path = require('path')
94
82
 
95
83
 
96
84
 
85
+ module.exports = {
86
+
87
+ plugins: [
88
+
89
+ '~/plugins/vue-mdc-adapter'
90
+
91
+ ],
92
+
93
+ build: {
94
+
95
+ extend (config) {
96
+
97
+ config.module.rules.forEach(elem => {
98
+
99
+ if (elem.loader === 'vue-loader') {
100
+
101
+ elem.options.loaders.scss.forEach(elem => {
102
+
103
+ if (elem.loader === 'sass-loader') {
104
+
105
+ elem.options.includePaths = [path.resolve(__dirname, 'node_modules')]
106
+
107
+ }
108
+
109
+ })
110
+
111
+ }
112
+
113
+ })
114
+
115
+ }
116
+
117
+ }
118
+
119
+ }
120
+
97
- ---
121
+ ```
98
122
 
99
123
 
100
124
 

1

全体的に情報を増やした

2018/09/01 12:37

投稿

退会済みユーザー
test CHANGED
@@ -1 +1 @@
1
- Nuxt.jsでMaterial Components Vueを使いたい
1
+ Nuxt.jsでmaterial-components-vueを使いたい
test CHANGED
@@ -2,19 +2,35 @@
2
2
 
3
3
 
4
4
 
5
- Nuxt.jsでサイトを作成しているのですが、Nuxtに[Material Components Vue](https://github.com/matsp/material-components-vue)を組み込む方法がわかりません。
5
+ Nuxt.jsでサイトを作成しているのですが、Nuxtに[material-components-vue](https://github.com/matsp/material-components-vue)を組み込む方法がわかりません。
6
6
 
7
7
 
8
8
 
9
- NuxtでMaterial Components Webが使えれば何でもいいので、Material Components Vueが使えない場合は[vue-mdc-adapter](https://github.com/stasson/vue-mdc-adapter)でも構いません。その場合も方法を教えてくださると嬉しいです
9
+ NuxtでMaterial Components for the Webが使えれば何でもいいので、material-components-vueが使えない場合は[vue-mdc-adapter](https://github.com/stasson/vue-mdc-adapter)でも構いません。その場合も方法を教えてくださると嬉しいです。
10
10
 
11
11
 
12
12
 
13
- ## 試したこと・問題点
13
+ ## 困っていること
14
14
 
15
15
 
16
16
 
17
+ 一通りスタイルは読み込めていて動くのですが、以下の画像（GIF）のようにリップルエフェクトが付きません。
18
+
19
+
20
+
21
+ ![スタイルは読み込めているけどリップルエフェクトが付かない](463ccbec11a445b4ee286f806e246bcf.gif)
22
+
23
+
24
+
25
+ デベロッパーツールでコンソールを確認すると、以下の警告が表示されています。
26
+
27
+
28
+
29
+ ![イメージ説明](92aed342416e6b4abf3c8c7f5eda2597.png)
30
+
31
+
32
+
17
- 現在のソースコードです。
33
+ ## 現在のソースコード
18
34
 
19
35
 
20
36
 
@@ -72,9 +88,9 @@
72
88
 
73
89
 
74
90
 
75
- - [webpack - Nuxt.jsでMaterial Components Webを使うときに、Sassファイルを読み込めない(126033)｜teratail](https://teratail.com/questions/126033)の回答の通りにwebpackを拡張
91
+ - [webpack - Nuxt.jsでMaterial Components Webを使うときに、Sassファイルを読み込めない(126033)｜teratail](https://teratail.com/questions/126033)の回答の通りにwebpackを拡張（Sass Include Path）
76
92
 
77
- - pluginsにmaterial-components-vueを追加
93
+ - pluginsにmaterial-components-vueを追加（`ssr: false`）
78
94
 
79
95
 
80
96
 
@@ -82,16 +98,4 @@
82
98
 
83
99
 
84
100
 
85
- これで一通りスタイルは読み込めて動くのですが、リップルエフェクトが付きません。
86
-
87
-
88
-
89
- ![イメージ説明](463ccbec11a445b4ee286f806e246bcf.gif)
90
-
91
-
92
-
93
- ---
94
-
95
-
96
-
97
- とても困っているので、どなたかご教授いただけると幸いです。
101
+ どなたかご教授いただければ幸いです。