単体のvueファイルに、後付でvuetifyjsを導入する方法

自作のvueコンポーネントを作って、単体で公開しています。
nuxtとかは使わず、既存のhtmlの中に後付で追加出来るvueコンポーネントです。

そのvueコンポーネントの中に、vuetifyjsを追加する時のメモ。

追加でnpm installするモジュール

npm install --save vuetify @mdi/font sass

node-sassがあっても、別途sassのインストールが必要。これが無いとスタイルシート関連でエラーが出る

vueファイルの中でvuetifyjsを有効にする方法

vueファイルの中身はこんな感じ

import Vue from "vue";
import Vuetify from 'vuetify';
import { VApp,VBtn } from "vuetify/lib"

Vue.use(Vuetify);// 1
export default Vue.extend({
  vuetify: new Vuetify({}), // 2
  mounted: function () {}
});

Vuetifyの指定、1と2の2種類あるけど、どっちかだけ指定するのが正しい。
自分の場合、エントリーポイントとなるvueファイルでは2の方法で指定して、実際にVuetifyを使う子vueファイルの中では1の方法で定義した。
どっちも同じ書き方にしたり、エントリーポイントのvueファイルでは不要じゃないかと思って色々試したけど、これ以外の組み合わせではダメだった

v-appで全体を囲う必要

ボタンみたいな単純なVuetifyエレメントであれば何も考えずに使う事が出来るが、v-menuの様にhtml全体から位置を計算するようなVuetifyエレメントを使う場合は、body直下をv-app要素で囲う必要がある。
既存のhtmlで作られたページにvueコンポーネントを追加する場合はこれが最大のネックになる。というか、この仕様があるから実質不可能と言える。

v-app要素はcssでmin-height: 100vh;と定義されているので、htmlの中の一部にvueコンポーネントを埋め込む場合、高さが狂ってしまう。

またVuetifyは以下のようなスタイルシートも定義するから既存のhtmlにどうしても影響が出てしまう。

html {
    font-size: 16px;
    overflow-x: hidden;
    text-rendering: optimizeLegibility;
}
* {
    background-repeat: no-repeat;
    padding: 0;
    margin: 0;
}