既存のVue3プロジェクトにVuetify3を導入する

はじめに

Vuetify3がリリースされましたね！
今回は既存のプロジェクトにてVuetify3を導入する手順を記載します。

前提

Vue3のプロジェクトを作成していること。

環境

$ node -v
v16.18.1

$ npm -v
8.19.2

手順

１．Vuetify3をインストールする

$ npm install vuetify@next

２．vuetify.jsファイルの追加

pluginsフォルダの中にvuetify.jsを作成します。
※今回mdiも追加しておきました。

vuetify.js

import "vuetify/styles";
import { createVuetify } from "vuetify";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
});

export default vuetify;

３．main.jsファイルの編集

routerを入れている場合、以下のようになります。
環境に合わせて変更してください。

main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
//追加
import vuetify from "./plugins/vuetify";

import "./assets/main.css";

const app = createApp(App);

//修正
app.use(router);
//追加
app.use(vuetify).mount("#app");

４．ボタンタグを追加

試しにボタンタグを入れてみます。

AboutView.vue

<template>
  <div class="about">
    <v-btn elevation="2">test</v-btn>
  </div>
</template>

５．Vuetifyが効いているか確認

$npm run dev実行でブラウザを確認してみます。

問題なく表示されました！

参照元：https://next.vuetifyjs.com/en/getting-started/installation/#frequently-asked-questions