Vuetifyをv-appでラップせずに使いたい

Vuetifyはv-appで囲む必要がある

VuetifyはVueのコンポーネントフレームワークでレスポンシブに対応していて、デザインも機能性も素晴らしいです。
ただひとつ欠点(?)があり、v-appで全体を囲まなければなりません。ボタンを表示する場合は以下の通りです。

<v-app>
    <v-btn color="success">Success</v-btn>
</v-app>

v-appがない場合は、v-btnのテーマカラースタイルが展開されず、グレー色のボタンになります。
v-dialogの場合v-appなしで使えば、開閉はするのですが、黒背景が表示されません。

Frequently asked questions — Vuetify.js
Stuck on a problem? Check out the most frequently asked questions by the Vuetify community.

Vuetifyはv-appコンポーネントの使用が必要です。アプリケーション全体をラップしなければならず、テーマを含むフレームワーク機能の多くの中心点です。
コンポーネントがv-app要素で囲まれていることを確認してください。

一から作るサイトの場合、何も不便はないのですが、既に組まれているサイトを全てv-appで囲むのは少々億劫です。
またv-appを全体でラップすることで既存のデザインの崩れなどが発生する可能性もあります。

解決策

簡易ですが、ダイアログに関してはv-appで囲わずとも以下のようにv-appがコード内に存在してれば、スタイルは適用されます。
v-btnもテーマカラーが適用されます。

<v-app style="height: 0px;"></v-app>
<v-btn color="success">Success</v-btn>
<v-dialog></v-dialog>

既存サイトでVuetifyを使いたい場合はこの方法で問題解決できるかもしれません。
その他のコンポーネントは試してないので、問題あったらすみません。

コメント