[Vuetify3]まずはとにかく始めたい場合。CDNでVuetify3を試してみる方法[Vue.js3]

「環境構築だけで、1日が過ぎてしまった！！」
…そんな経験、Web制作者ならきっとあると思います。

タイトルの通り、今回は
「とにかくまずは、始めてみたい。 Vuetify3を動かしてみたい！！」

「ビルド…？なにそれ？とにかくまずはうごかしたいの！！！！！」

そんな気持ちの場合に使えるかもしれない「CDNを使用した Vuetify3 の使用方法」について、書いていきたいと思います。

もちろん真っ当な理由として

・スキルアップや学習用途でまずは動かしてみたい
・モックアップ用にひとまず、手元でのビルドなしで試してみたい

そんな場合にも使えますね。

実案件で Vuetify を使用する場合は、ほとんどがCLI(またはVite等)を通じて
ビルドして運用するケースが多いと思いますが、今回は参考までにCDNによる動かし方を書いていきたいと思います。

なお、この記事を書いた際に Vue3, Vuetify3 を動作させている環境は次のとおりです。
参考までにご確認ください。
・Mac OS Montrey (12.3.1)
・Node.js v16.18.1
↑この Node.js のバージョンは、 Corepack が同梱されているバージョン( おすすめは v16.10 以降 )を使用することをお勧めします。

CDNで Vuetify3 を使う方法

では早速、CDN経由で Vuetify3 を使う方法です。

必要なCDNのリンク先は、Vuetify3公式ページによると、次のURLとなります。

https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.css
https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.js

1行目がVuetifyで使用するcss、
2行目がVuetify本体のjs
となります。

少し前まで、上記のCDNリンク先の最新は3.0.7でしたが、この記事の更新時点の
日本時間2023年2月26日現在、Vuetify 3.1.6 がリリースされています。

これを、cssは使用したいページのhtmlのheadタグ内で次の様に読み込み、

<link href="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.css" rel="stylesheet">

Vuetify本体のjsは使用したいページのhtmlで(bodyの閉じタグ直前などで)

<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.js"></script>

↑の様に読み込みます。

ただし、これだけでは準備が整いません。
そうです。 Vue.js3 本体も読み込まなければ正常に動作しません。
というわけで Vue.js3 本体をVuetify3よりも先に読み込んでおきます。
Vue.js3 のCDNのリンク先は、Vue.js公式サイトによると次になります。

https://unpkg.com/vue@next

上記のURLで、最新版のVue.jsをCDN経由で使用できます。
ただし、Vue.js公式サイトにも記述がある様に、
「本番環境で使用する際はバージョン番号、ビルド番号を指定して使用」する事が推奨されています。
※また、実際に使ってみるとわかりますが、上記のCDN経由でVue.jsを使用した場合は「これは開発用のビルドで、本番用の物じゃないです。本番環境では本番用のバージョンを使うのがおすすめです」と言った主旨の英文アラートがconsoleに出ます。

そしてあとひとつ。アイコンフォントを読み込みます。
VuetifyはUIコンポーネントの至る所でアイコンフォントを使用していますので、これを忘れると
例えば v-radio や v-checkbox 等のコンポーネントで正しい表示がされません。

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">

まとめるとcssは、使用したいhtmlのヘッダ内で

<link href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.css" rel="stylesheet">

↑この様にアイコンフォントと一緒に読み込み。

js側は、Vue.js3 と Vuetify3 をたとえばbodyタグの閉じタグ直前の行に読み込み。

<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.1.6/dist/vuetify.min.js"></script>

これで、Vuetify3 をCDNで使用する準備ができたことになります。

必要なコードを記述する

ここまでのセクションで、「Vuetify3 をCDNで使用する準備」自体はできたことになります。
続いて、実際に動かすためのいくつかのコードを、
使用したいhtmlに書いていきます。

まず、html内には、紐づけるid名を付与した要素を用意しておきます。

<div id="app"></div>

↑このid名が付与された要素内で、Vue.jsがマウントされる(この中で展開される)、といった概念になります。

js側は、次の様に記述することで、Vue.jsとVuetifyをCDN経由で使用する事ができます。

こちらを閲覧するには、tedate Premiumにご登録ください。
登録済みの方のログインページはこちら。
tedate Premiumのご説明・新規ご登録は次のリンクよりお進みください。
tedate Premium のご紹介

↑たとえばこの様に書く事で、Vue.jsとVuetifyをCDN経由で使用する事ができます。
※行末尾のセミコロンを省略する/しないなどのお作法はお好み(というか、個々の現場や案件のコーディングルール次第)で…。

意味合いとしては、最初の
2〜4行で Vue と Vuetify を使用する旨を記述。
6〜23行目が、Vue で使用するデータ変数や、使用する関数の定義。
それを、
app.use(vuetify).mount('#app');
として、html側の app という名前のidに紐づけている(そのid名を持つ要素内にマウント)という事です。