質問編集履歴
7
material-components-vueについてを削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
お世話になっております。
|
|
2
2
|
|
|
3
|
-
現在Nuxt.jsでWebアプリを作成していて、UIフレームワークにvue-mdc-adapter
|
|
3
|
+
現在Nuxt.jsでWebアプリを作成していて、UIフレームワークにvue-mdc-adapterを使いたいと思っています
|
|
4
4
|
|
|
5
5
|
## 困っていること
|
|
6
6
|
|
6
nuxt-sass-resources-loaderについてを削除
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -60,19 +60,4 @@
|
|
|
60
60
|
}
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
-
## その他試したこと
|
|
64
|
-
|
|
65
|
-
nuxt-sass-resources-loaderを使って`node_modules/vue-mdc-adapter/dist/styles.scss`を読み込んでみましたが、スタイルが全く適用されませんでした。
|
|
66
|
-
|
|
67
|
-
```
|
|
68
|
-
module.exports = {
|
|
69
|
-
modules: [
|
|
70
|
-
['nuxt-sass-resources-loader', 'vue-mdc-adapter/dist/styles.scss']
|
|
71
|
-
],
|
|
72
|
-
plugins: ['~/plugins/vue-mdc-adapter']
|
|
73
|
-
}
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
---
|
|
77
|
-
|
|
78
63
|
どなたかご教授いただければ幸いです。
|
5
nuxt-sass-resources-loaderに関する記述を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -60,4 +60,19 @@
|
|
|
60
60
|
}
|
|
61
61
|
```
|
|
62
62
|
|
|
63
|
+
## その他試したこと
|
|
64
|
+
|
|
65
|
+
nuxt-sass-resources-loaderを使って`node_modules/vue-mdc-adapter/dist/styles.scss`を読み込んでみましたが、スタイルが全く適用されませんでした。
|
|
66
|
+
|
|
67
|
+
```
|
|
68
|
+
module.exports = {
|
|
69
|
+
modules: [
|
|
70
|
+
['nuxt-sass-resources-loader', 'vue-mdc-adapter/dist/styles.scss']
|
|
71
|
+
],
|
|
72
|
+
plugins: ['~/plugins/vue-mdc-adapter']
|
|
73
|
+
}
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
---
|
|
77
|
+
|
|
63
78
|
どなたかご教授いただければ幸いです。
|
4
pluginsのミスを修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -14,9 +14,9 @@
|
|
|
14
14
|
|
|
15
15
|
```
|
|
16
16
|
import Vue from 'vue'
|
|
17
|
-
import
|
|
17
|
+
import VueMDCAdapter from 'vue-mdc-adapter'
|
|
18
18
|
|
|
19
|
-
Vue.use(
|
|
19
|
+
Vue.use(VueMDCAdapter)
|
|
20
20
|
```
|
|
21
21
|
|
|
22
22
|
### pages/index.vue
|
3
タグを追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
File without changes
|
2
使いたいUIフレームワークをvue-mdc-adapterに変更 & 全体的に修正
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Nuxt.jsで
|
|
1
|
+
Nuxt.jsでvue-mdc-adapterを使いたい
|
body
CHANGED
|
@@ -1,22 +1,16 @@
|
|
|
1
1
|
お世話になっております。
|
|
2
2
|
|
|
3
|
-
Nuxt.jsで
|
|
3
|
+
現在Nuxt.jsでWebアプリを作成していて、UIフレームワークにvue-mdc-adapter（もしくはmaterial-components-vue）を使いたいと思っています
|
|
4
4
|
|
|
5
|
-
NuxtでMaterial Components for the Webが使えれば何でもいいので、material-components-vueが使えない場合は[vue-mdc-adapter](https://github.com/stasson/vue-mdc-adapter)でも構いません。その場合も方法を教えてくださると嬉しいです。
|
|
6
|
-
|
|
7
5
|
## 困っていること
|
|
8
6
|
|
|
9
7
|
一通りスタイルは読み込めていて動くのですが、以下の画像（GIF）のようにリップルエフェクトが付きません。
|
|
10
8
|
|
|
11
9
|
|
|
12
10
|
|
|
13
|
-
デベロッパーツールでコンソールを確認すると、以下の警告が表示されています。
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
11
|
## 現在のソースコード
|
|
18
12
|
|
|
19
|
-
|
|
13
|
+
### plugins/vue-mdc-adapter.js
|
|
20
14
|
|
|
21
15
|
```
|
|
22
16
|
import Vue from 'vue'
|
|
@@ -25,7 +19,7 @@
|
|
|
25
19
|
Vue.use(Button)
|
|
26
20
|
```
|
|
27
21
|
|
|
28
|
-
|
|
22
|
+
### pages/index.vue
|
|
29
23
|
|
|
30
24
|
```
|
|
31
25
|
<templates>
|
|
@@ -33,19 +27,37 @@
|
|
|
33
27
|
</templates>
|
|
34
28
|
|
|
35
29
|
<script>
|
|
36
|
-
|
|
30
|
+
export default {}
|
|
37
31
|
</script>
|
|
38
32
|
|
|
39
|
-
<style lang="scss">
|
|
33
|
+
<style lang="scss" scoped>
|
|
40
|
-
|
|
34
|
+
@import "vue-mdc-adapter/dist/button/styles"
|
|
41
35
|
</style>
|
|
42
36
|
```
|
|
43
37
|
|
|
44
|
-
|
|
38
|
+
### nuxt.config.js
|
|
45
39
|
|
|
46
|
-
|
|
40
|
+
```js
|
|
47
|
-
|
|
41
|
+
const path = require('path')
|
|
48
42
|
|
|
43
|
+
module.exports = {
|
|
44
|
+
plugins: [
|
|
45
|
+
'~/plugins/vue-mdc-adapter'
|
|
46
|
+
],
|
|
47
|
+
build: {
|
|
48
|
+
extend (config) {
|
|
49
|
+
config.module.rules.forEach(elem => {
|
|
50
|
+
if (elem.loader === 'vue-loader') {
|
|
51
|
+
elem.options.loaders.scss.forEach(elem => {
|
|
52
|
+
if (elem.loader === 'sass-loader') {
|
|
53
|
+
elem.options.includePaths = [path.resolve(__dirname, 'node_modules')]
|
|
54
|
+
}
|
|
55
|
+
})
|
|
56
|
+
}
|
|
57
|
+
})
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
49
|
-
|
|
61
|
+
```
|
|
50
62
|
|
|
51
63
|
どなたかご教授いただければ幸いです。
|
1
全体的に情報を増やした
title
CHANGED
|
@@ -1,1 +1,1 @@
|
|
|
1
|
-
Nuxt.jsで
|
|
1
|
+
Nuxt.jsでmaterial-components-vueを使いたい
|
body
CHANGED
|
@@ -1,13 +1,21 @@
|
|
|
1
1
|
お世話になっております。
|
|
2
2
|
|
|
3
|
-
Nuxt.jsでサイトを作成しているのですが、Nuxtに[
|
|
3
|
+
Nuxt.jsでサイトを作成しているのですが、Nuxtに[material-components-vue](https://github.com/matsp/material-components-vue)を組み込む方法がわかりません。
|
|
4
4
|
|
|
5
|
-
NuxtでMaterial Components Webが使えれば何でもいいので、
|
|
5
|
+
NuxtでMaterial Components for the Webが使えれば何でもいいので、material-components-vueが使えない場合は[vue-mdc-adapter](https://github.com/stasson/vue-mdc-adapter)でも構いません。その場合も方法を教えてくださると嬉しいです。
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## 困っていること
|
|
8
8
|
|
|
9
|
-
|
|
9
|
+
一通りスタイルは読み込めていて動くのですが、以下の画像（GIF）のようにリップルエフェクトが付きません。
|
|
10
10
|
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
デベロッパーツールでコンソールを確認すると、以下の警告が表示されています。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## 現在のソースコード
|
|
18
|
+
|
|
11
19
|
**plugins/material-components-vue.js**
|
|
12
20
|
|
|
13
21
|
```
|
|
@@ -35,15 +43,9 @@
|
|
|
35
43
|
|
|
36
44
|
**nuxt.config.js**
|
|
37
45
|
|
|
38
|
-
- [webpack - Nuxt.jsでMaterial Components Webを使うときに、Sassファイルを読み込めない(126033)｜teratail](https://teratail.com/questions/126033)の回答の通りにwebpackを拡張
|
|
46
|
+
- [webpack - Nuxt.jsでMaterial Components Webを使うときに、Sassファイルを読み込めない(126033)｜teratail](https://teratail.com/questions/126033)の回答の通りにwebpackを拡張（Sass Include Path）
|
|
39
|
-
- pluginsにmaterial-components-vueを追加
|
|
47
|
+
- pluginsにmaterial-components-vueを追加（`ssr: false`）
|
|
40
48
|
|
|
41
49
|
---
|
|
42
50
|
|
|
43
|
-
これで一通りスタイルは読み込めて動くのですが、リップルエフェクトが付きません。
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
---
|
|
48
|
-
|
|
49
|
-
|
|
51
|
+
どなたかご教授いただければ幸いです。
|