Nuxt.js+Vuetifyで色が変わらなかったりレイアウトが崩れるときの対処法
今回はNuxt.js+Vuetifyで色が変わらなかったりレイアウトが崩れるときの対処法についてご紹介いたします。
使用したNuxt.jsのバージョンはv2.14.7です。
Nuxt.js+Vuetifyで色が変わらなかったりレイアウトが崩れるときの対処法
Nuxt.js+Veutifyで環境を整えていたときのことです。
Nuxt.jsのコンテナを用意し、下記のVuetifyの公式ドキュメントを元に環境構築を行ってましたが、Vuetifyの色を変えたり表示位置を変えるコンポーネントを利用してもコンポーネントの内容が正常に表示できない現象が起きました。
https://vuetifyjs.com/ja/getting-started/installation/#nuxt-3067306e30a430f330b930c830fc30eb
他のサイトなどで検索をかけて設定周りを確認して、設定を調整していっても色やレイアウトが正常に表示されることはありません。
以前Nuxt.jsを使わずにVue.jsを利用してVuetifyを利用したときは正常にVuetifyコンポーネントを利用して色などを変えることができたので、少しハマりました。
結論としては、Vue.jsにとっての「index.html」である、Nuxt.jsの「default.vue」を編集していないことが原因でした。
初期の状態では「default.vue」のtemplateの部分が
|
1 2 3 4 5 |
<template> <div> <nuxt/> </div> </template> |
となっていますが、これを
|
1 2 3 4 5 |
<template> <v-app id="app"> <nuxt/> </v-app> </template> |
に直さなくてはなりません。
「v-app」で括ってやらないとVuetifyは認識してくれないみたいですね。
終わりに
今回はNuxt.js+Vuetifyで色が変わらなかったりレイアウトが崩れるときの対処法についてご紹介いたしました。