> [!warning]
> [[Vuetify3]]はalpha版
## リポジトリ
https://github.com/vuetifyjs/vuetify/tree/v3.0.0-alpha.11
`v3.0.0-alpha.11`の部分はタグ。
## プロジェクト作成
[[📜2021-09-04 Viteでvue3 x TypeScriptプロジェクトを作成]]する。
## [[Vuetify3]]インストール
[[Vue CLI]]を使ってインストールする。
```console
$ vue --version
@vue/cli 4.5.13
$ vue add vuetify
📦 Installing vue-cli-plugin-vuetify...
+
[email protected]
added 28 packages from 17 contributors and audited 160 packages in 5.163s
16 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Successfully installed plugin: vue-cli-plugin-vuetify
? Choose a preset: Preview (Vuetify 3 + Vite)
🚀 Invoking generator for vue-cli-plugin-vuetify...
📦 Installing additional dependencies...
added 25 packages from 34 contributors and audited 185 packages in 4.257s
20 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
⚓ Running completion hooks...
✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify
vuetify Discord community: https://community.vuetifyjs.com
vuetify Github: https://github.com/vuetifyjs/vuetify
vuetify Support Vuetify: https://github.com/sponsors/johnleider
```
## [[Vuetify3]]設定
`main.ts`を書き換える。
```ts:main.ts(変更前)
import { createApp } from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'
const app = createApp(App)
app.use(vuetify)
app.mount('#app')
```
↓
```ts:main.ts(変更後)
import "vuetify/styles";
import { createApp } from "vue";
import { createVuetify } from "vuetify";
import App from "./App.vue";
const app = createApp(App);
const vuetify = createVuetify();
app.use(vuetify);
app.mount("#app");
```
## vueファイルのシンプル化
```html:App.vue
<script setup lang="ts">
import HelloWorld from "./components/HelloWorld.vue";
</script>
<template>
<hello-world msg="hgoehoge" />
</template>
```
```html:components/HelloWorld.vue
<script setup lang="ts">
defineProps<{ msg: string }>();
</script>
<template>
<button>{{ msg }}</button>
</template>
```
## 動作確認
```console
npm run dev
```
アクセスすると以下の警告が出るが一旦スルー。
```
Unrestricted file system access to "/src/main.js"
For security concerns, accessing files outside of serving allow list will be restricted by default in the future version of Vite. Refer to https://vitejs.dev/config/#server-fs-allow for more details.
```
画面が表示されない。`index.html`のパスが`js`になっているため`ts`に戻す。
```diff:index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vuetify 3 Vite Preview</title>
</head>
<body>
<div id="app"></div>
- <script type="module" src="/src/main.js"></script>
+ <script type="module" src="/src/main.ts"></script>
</body>
</html>
```
以下のようなエラーが出る。
```
runtime-core.esm-bundler.js:6875 [Vue warn]: Failed to resolve component: v-main
at <App>
```
==ここで諦めた。。(2021-09-04)==
代替として[[Naive UI]]とか..。