Vuetify3 Betaをインストールしてみた件

日本時間2022年11月1日現在、Vuetify 3 がリリースされています！
Vuetify3(Betaでなくリリース版)をインストールしてみた記事もあります。是非ご覧ください！
11月1日リリースのVuetify3(Titan)をインストールしてみた件[Vue3, Vuetify3]
Vuetify3開発者の方々に、心からの感謝と賛辞を。

以前、「Vuetify3.0(コードネーム：Titan)はいつ出るのか？」
という記事を書きました。

その記事では「3月予定」とされていた
「Vuetify3のベータ版」がリリースされていましたので、
インストール〜 local環境起動まで試してみました。

手順

Vuetify3 Beta 公式サイトの手順に沿って、各コマンドを実行していきます。

インストールには、VueCLIを使用します。
まず、Vuetify3 Betaが動くとされている @vue/cli のバージョンは 5.0.x 系統とのことですので、
このページを参考にアップグレードもしくは、インストールしておきます(以下は、執筆時点の最新バージョンインストールの例)。

npm install -g @vue/cli@5.0.3

すでに @vue/cli を使用していて、アップグレードする場合は以下。

npm update -g @vue/cli

VueCLIのインストールが済んだら、次のコマンドを実行して新規Vueプロジェクトを作成します（名前はなんでも良いです）。

vue create vuetify-3-beta-sample

次のように聞いてくるので、[Vue 3]を選択してENTERを押します。

? Please pick a preset:
  > Default ([Vue 3] babel, eslint)
    Default ([Vue 2] babel, eslint)
    Manually select features

作成された新規Vueプロジェクトのディレクトリに移動(change directory ≒ cd)します。

cd /Users/(user名)/(対象プロジェクトまでのpath)/vuetify-3-beta-sample

ここまでが、新規Vue 3プロジェクトを作成する手順です。

Vuetifyを追加する

上のセクションまでの手順で、新規Vue 3プロジェクトができました。
では続いて、Vuetify 3 Beta をプロジェクトに追加します。

vue add vuetify

上記を実行すると、次のように聞いてくるので、Vuetify 3 Preview (Vuetify 3) を選択してENTER。

? Choose a preset:
  Configure (advanced)
  Default (recommended)
  Vite Preview (Vuetify 3 + Vite)
  Prototype (rapid development)
> Vuetify 3 Preview (Vuetify 3)

すると次のように聞いてきますが、インストールしてみるのがこの記事の目的なので、 y を入力してENTERします。

? Would you like to install Vuetify 3 nightly build? (WARNING: Nightly builds are intended for development testing and may include bugs or other issues.) (y/N)

これで、Vuetify 3 Beta を使う手順が整いました。
（ように思われました…詳しくは以下のセクションにて）