Zenn
📌

Vue3.js(Tauri vue3 vuetity) から始めるディスクトップアプリ＃4 [Vuetify3の導入をしよう]

2022/11/28に公開
Rust
TypeScript
Vue 3
Tauri
veufity3
tech

はじめに

vue.js のほぼ標準のUIコンポーネントであるVuetifyを使いたいと思います。Vuetify3は、長い間comming soon状態だったのですが、2022/11時点では　リリース状態になっています。
しかし、ベータの時と変化なく次期版数（2023/Q1）まで、コンポーネントはV2と同等とはいかないようですが、新規に作成する僕のコンテンツは問題ないと考えて、今回は利用します。

v3.1 (Valkyrie)
Target Release: Q1 2023
Overview:
First post v3 release that will focus on porting remaining missing v2 　
components and general bug fixing.
Milestone Issues: Github Issues

https://next.vuetifyjs.com/en/introduction/roadmap/

プロジェクトに追加

yarn add vuetify@^3.0.1　とコマンドを投入します。

 $ yarn add vuetify@^3.0.1
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...

success Saved 0 new dependencies.
Done in 0.31s.

viteプラグインの追加（追記）

プラグインを追加します。

$ yarn add vite-plugin-vuetify
yarn add v1.22.19
├─ ms@2.1.2
├─ p-limit@2.3.0
├─ p-locate@4.1.0
├─ p-try@2.2.0
├─ path-exists@4.0.0
├─ pkg-dir@4.2.0
├─ semver@6.3.0
└─ vite-plugin-vuetify@1.0.0
Done in 2.82s.

準備（追記あり）

下記のようにvite.config.tsにプラグインを読み込む設定をする。

vite.config.ts
  plugins: [
    vue(),
    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+    vuetify({
+        autoImport: true,
+    }),
  ],

下記のようにmain.tsを編集する。

main.ts
import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
})

createApp(App).use(vuetify).mount('#app')

設定ファイルを作成する。

vuetify.ts
// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Composables
import { createVuetify } from 'vuetify'
import { createApp } from 'vue'

// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
  theme: {
    defaultTheme : 'dark'
  },
})

テスト表示

下記のようにテンプレート構文を書き換えて問題がないことを確認する。

app.vue
<template>
  <div class="divInput" style="max-width: 400px">
    <v-label> {{ textMsg }} </v-label><br/>
  </div>
  <v-btn prepend-icon="mdi-vuetify" variant="plain">
    Button
  </v-btn>
  <v-btn
      variant="flat"
      color="secondary"
   >
      Secondary
  </v-btn>
</template>

お疲れさまでした。

Discussion