scriptタグで読み込んで使用するプロダクトにVuetifyを使用していると
Vuetifyの中に別のVuetifyが存在するような状況が発生する
このような特殊な条件下では、 特に対策をとらないと組み込んだVuetifyが外のVuetifyにかなり影響する
影響する要素
私が確認できた、大きく影響する要素は下記の３点
- css(特に_reset.css は組み込み元がVuetifyでなくとも影響する)
- v-dialogのようなtrueのときにDOMがつくられるComponent
- テーマ
CSS
Vuetifyに限らず、多くのCSSフレームワークにはデザインを実現するためのcssが存在している
このcssファイル自体はグローバルのようで外の要素に対しても影響する
特に問題となるのはreset css(_reset.css)で、
Vuetifyの場合は問題とならないが、Vuetify以外だとこの影響を大きく受けてしまう
影響させないためにはpostcssを使用してprefix を付与してあげる必要がある
この方法については下記の記事に詳しく書いてあった
ただし、この記事ではwebpack.config に設定しいるため
vue.configを使用している場合はconfigureWebpackに書く必要がある
v-dialogのようなtrueのときに発生するComponents
一部コンポーネントでは、組み込んだVuetifyではなく、組み込み元のVuetifyの影響を受けることがある
原因としては、attachに指定がないときには
querySelecterでdata-appを取得してその要素の下にDOMを作っているからだと思われる
target = document.querySelector('[data-app]')
対応としては、組み込むVuetifyにidをつけてv-dialogのattachで指定すれば良い
vuetifyjs.com
テーマ
Vuetifyではカスタム可能なテーマをもち、それに基づいてスタイルシートを作成するが、
組み込み元と組み込んだVuetifyで異なるテーマを使用している場合、
後勝ちでテーマが上書きされる
(どちらのテーマが影響するかは読み込みタイミングによる)
対応としては、テーマを揃えるか、どちらかのテーマを無効にして、影響しないようにする必要がある
ちなみに、IssueにはFeature Requestとしてscope vuetify-theme-stylesheet stylesの実装があがっていたが
特に実装される予定はなさそう
