2023年1月リリースのVuetify3.1.0(Valkyrie)をインストールしてみた件[Vue3, Vuetify3]

コーディングに関する記事
2022年11月1日に満を持してリリースされた
Vuetify 3 (コードネーム:Titan)

それから2ヶ月と少し。早くもバージョン 3.1.0 (コードネーム:Valkyrie) がリリースされています。

ということで、今回も
さっそくインストール〜起動まで試してみました。

なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。

・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( v16.10以降 )を使用することをお勧めします。

まずは結論から。バージョン 3.1.0 (コードネーム:Valkyrie)のインストール手順など

では早速、バージョン 3.1.0 (コードネーム:Valkyrie) のインストール方法です。
※ node.js や yarn、 vite についての説明はこの記事では割愛します。

Vuetify3公式サイト の手順に沿って、ターミナルから次のコマンドを実行します。

yarn create vuetify

ここまでは同じ手順ですね。

上記コマンドを実行すると、設定をいろいろ聞いてくれるので選択します。
3.1.0では、
・プロジェクトの名前
を設定した後、
プリセットの選択肢があります。
Vuetify3.1.0インストール時のプリセット選択画面のキャプチャ
↑選択項目としては
・Vuetifyのみ(Default)
・Vuetify と VueRouter をインストール(Base)
・Vuetify と VueRouter、そして状態管理ができる Pinia をインストール(Essentials)
・独自選択(Custom)

の4つがあります。
コンポーネントの階層がそんなに深くなる予定がなければ Base でも充分使えるかと思います。
もし初めから Store を使う予定があるなら Essentials を選択、といったところでしょうか。

後の選択肢としては
・TypeScriptを使うかどうか
・何を使って依存関係をインストールするか(npm, yarn など)

↑これらで、この部分は 3.0 (Titan)と同じ項目ですね。
yarn create vuetify実行時のキャプチャ
↑3.0 (Titan)の際と同じく、こんな感じのことを聞いてきます。

設定項目を選択してインストールに成功すると、次のキャプチャの様なファイル構成のディレクトリ(ディレクトリ名は、先ほど設定したプロジェクト名になる)が生成されます。
Vuetify3インストール後のデフォルトディレクトリ構成
↑これも 3.0 (Titan)の際と同じ部分ですね。

あとは、プロジェクトディレクトリに移動して( cd 対象のディレクトリ )、
次を実行するだけです。

yarn dev

viteによりlocalサーバが立ち上がった様子
↑そうすると Vite によってlocalサーバーが起動されます。

Vuetify 3.1.0 (コードネーム:Valkyrie)の起動画面

3.0 の際と異なるのは、起動直後の画面の左上に、「どのプリセットを使用してインストールしたか」が明示されている点です。Vuetify3.1.0インストール_BasePreset選択時↑Vuetify と VueRouter を選択してインストールした場合は左上に「Base Preset」の表記。

Vuetify3.1.0インストール_EssencialPreset選択時
Pinia込みでインストールした場合は左上に「Essentials Preset」の表記が入ります。

v3.0の際と微妙に手順が変わっていますが、ほぼ同じような手順ですね。

インストール時に構成を選択できる点は便利かと思います。そして選択したプリセットが明示される点も良いですね。

CDNを使って試してみるには

Vuetify 3 は、ここまでのセクションでご紹介した様に
かなり手軽に使用開始できる印象ですが、もっとライトに使いたい場合。
気軽に試してみたい
モックアップ用に環境構築なしでまずは使ってみたい

そんな場合にはCDNでの利用もできます。具体的な方法について記事を書きましたので、次のリンクからご覧ください。

[Vuetify3]まずはとにかく始めたい場合。CDNでVuetify3を試してみる方法[Vue.js3]
↑CDNでの読み込み、使用開始までの createApp の書き方、CDN使用での setup関数の書き方などを記事にしてみました。

Vuetify公式のインストール解説ページ(「VueCLI ではなくなぜ Vite ?」や「既存プロジェクトに後からVuetify3追加」など記載あり)

Vuetify公式の、インストールについて解説されたページは以下になります。
Get started with Vuetify3 – Vuetify
↑こちらのVuetify公式ページでは、
VueCLIでのインストールではなくなぜViteなのか?
と言う点や、

既存のプロジェクトに後からVuetify3を追加する方法

簡単に試してみたい方や、ビルドを介さないようなケース向けに
CDN経由で使用する方法
などが記載されています。
3.0のインストール記事でも書きましたが、熟読すると、理解が深まると思います。

Vuetify3 のUIコンポーネントを実際に使ってみた記事

Vuetify3 をインストールした後、そのUIコンポーネントを実際に使ってみた記事を随時更新しています。
あわせてご覧ください。

現時点で、Vuetify3のUIコンポーネントを実際に使ってみた記事は、次のものがあります。

※ 随時更新中です!!

この記事のまとめ

2022年11月1日に正式リリースされたばかりの
Vuetify 3 (コードネーム:Titan)ですが、

2ヶ月後にさっそく
Vuetify 3.1.0 (コードネーム:Valkyrie)
が登場していたため、それをインストールしてlocal環境で立ち上げてみる方法について、記事を書いてみました。

上のセクションでも書きましたが
さまざまなUIコンポーネントを実際に試してみた記事を、随時更新中です。
ご興味に応じて、あわせてお読みください。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。
本年もどうぞよろしくお願いいたします。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。

この記事をシェアする: