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

[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.0.1/dist/vuetify.min.css
https://cdn.jsdelivr.net/npm/vuetify@3.0.1/dist/vuetify.min.js

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

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

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

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

<script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.1/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に出ます。

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

<link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.1/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.0.1/dist/vuetify.min.js"></script>

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

必要なコードを記述する

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

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

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

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

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

<script>
const { createApp } = Vue;
const { createVuetify } = Vuetify;
const vuetify = createVuetify();

const app = createApp({
setup() {
  const myItem = Vue.reactive({
    item01: 'one',
    item02: 'two',
    item03: 'three',
    item04: 'four',
    item05: 'five'
  })
  const myFunction = () => {
      alert('Vuetify 良い。すごく良い。');
    }
    return {
      myItem,
      myFunction
    }
  }
});

app.use(vuetify).mount('#app');
</script>

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

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

全体像

CDN経由で、何らかのhtmlページで
「ひとまず動かしてみたい」という場合の、htmlのコード全体像は次の様になります。
※サンプルのため、13行目のstyleは直書きで簡素に当てています。実際はclassを定義して当てる形が良いです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>タイトルサンプル</title>
  <link href="https://cdn.jsdelivr.net/npm/vuetify@3.0.1/dist/vuetify.min.css" rel="stylesheet">
</head>
<body>
<main>
  <div id="app">
    <div style="margin: 3.5rem auto; gap: 1rem; display: flex; justify-content: center;">
      <v-btn color="indigo">{{ myItem.item01 }}</v-btn>
      <v-btn color="indigo" variant="outlined">{{ myItem.item02 }}</v-btn>
      <v-btn color="indigo" variant="tonal">{{ myItem.item03 }}</v-btn>
      <v-btn color="indigo" variant="text">{{ myItem.item04 }}</v-btn>
      <v-btn color="indigo" variant="plain">{{ myItem.item05 }}</v-btn>
    </div>
  </div>
</main>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@3.0.1/dist/vuetify.min.js"></script>
<script>
  const { createApp } = Vue;
  const { createVuetify } = Vuetify;
  const vuetify = createVuetify();
  
  const app = createApp({
  setup() {
    const myItem = Vue.reactive({
      item01: 'one',
      item02: 'two',
      item03: 'three',
      item04: 'four',
      item05: 'five'
    })
    const myFunction = () => {
        alert('Vuetify 良い。すごく良い。');
      }
      return {
        myItem,
        myFunction
      }
    }
  });
  
  app.use(vuetify).mount('#app');
</script>
</body>
</html>


この記事のまとめ

今回は
「とにかくまずは、始めてみたい。 Vuetify3を動かしてみたい!!」
という場合にCDN経由で Vuetify3 を使ってみる方法について、記事を書きました。

記事内でも書きましたが、
CDN経由での使用はお手軽ですが
その反面、ある程度の規模のWebアプリやWebサイト案件の
本番環境ではあまり用いられる手法ではなかったり、
(もちろん実案件でも場合によって使う場合はあるにはあると思いますが)

また、手元でのビルドを介して使用する際とは様々な箇所で記述方法が変わってくる点もあったり、
いろいろと制約もあります。

ただし事実、手軽にお試しできるという意味では
特にWebデザイナーのスキルセットの方が Vue.js や Vuetify というものについて
「まず動かしてみる、触れてみる」という事に
向いている方法のひとつなのではないかと感じています。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

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

この記事をシェアする: