Vuetify3.0Alphaを試してみた

概要

Alpha版がでてvue3でのvuetifyを試せるようになったので、確認のためのお試しのメモ。
ドキュメントも仮で日本語化されている。

viteインストール

nextドキュメントのアルファ版インストールに従って、今回はvite利用パターンにしてみた。

vue/cliが古いままだったので、最新版に更新し、ドキュメントどおりにプロジェクト作成

> npm install -g @vue/cli
> npm init @vitejs/app vuetify3viteProject --template vue

> cd vuetify3viteProject
> vue add vuetify

> npm install
> npm run dev

起動直後のスクリーンショット

viteのおかげか起動はやい。

vite v2.4.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 307ms.

変更されたところ

初期化プロセス変更

vue2/Vuetify2.xのころnew Vue({vuetify}).$mount('#app')みたいにしていた処理が変わってる。

main.js

import { createApp } from 'vue'
import vuetify from './plugins/vuetify'
import App from './App.vue'

const app = createApp(App)
app.use(vuetify)

app.mount('#app')

Hello World

実際どのへんが変わったのかとHelloWorld.vueをみると、ほとんど変わってない。
(追記： 廃止されたはずのcontainプロパティとかでてるので、まだメンテナンスされてないだけっぽい)

アルファリリースノートで関係ありそうなところをざっくり見ていくと、各コンポーネントよりもレイアウトとかグリッドシステムまわりが大きくかわったっぽい。

とりあえず手軽に試せそうなところから雑にHelloWorld.vueに追記した。

V-Btn

大きさ指定がsizeプロパティに代わった。
これはそもそもSizeの概念にdefaultってのが増えたってことなんかな。

HelloWorld.vue(抜粋)

    <v-row>
      <v-col>
        <h2>てすと</h2>
        <v-btn v-for="(size,i) in sizes" :size="size">{{i+1}} : {{size}}</v-btn>
      </v-col>
    </v-row>
...
  data: () => ({
    sizes: ['small', 'default', 'large', 'x-large'],
...

V-Image

containがcoverに変更?
これはv2.5あたりから変わらずだったやつかな？　左右切らずになるべくコンテナ埋める的な。

HelloWorld.vue(抜粋)

        <v-img
          cover
          :src="logo"
          class="my-3"
          height="200"
        />

Grid

Display Composableなるものが増えてる(?)っぽいので、そのあたりはあとで確認する。

廃止予定だったv-layout等(v1.5風の書き方)がついになくなったぽい。
グリッドクラスに v- プレフィクスがついたってどれのことだろう。