【Vue.js】CDNから読み込むやり方を解説します

Vue.js

2026.04.23

こんにちは。たいら(@tairaengineer2)です。
転職を繰り返し現在5社経験している、15年目エンジニアです。

この記事ではVue.jsをCDNから読み込むやり方を解説します。

前提条件：実行環境について
Vue.jsをCDNから読み込むやり方を解説
Vue.jsの読み込みを確認するプログラムの概要
HTMLサンプルプログラム
実行結果
まとめ：Vue.jsをCDNから読み込んでみよう

前提条件：実行環境について

実行環境は以下の通りです。

OS	Windows11

Vue.jsをCDNから読み込むやり方を解説

Vue.jsをCDNから読み込むやり方を解説します。

以下のVue.jsの公式に行きます。
Vue.js-クイックスタート

【CDN の Vue を使用する】の章に移動すると、指定するべきscriptタグがあります。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

1	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Vue.jsでCDNから読み込むやり方を解説

このタグをHTMLに埋め込めばVue.jsを使うことができます。

では、次の章で実際に読み込んでみます。

Vue.jsの読み込みを確認するプログラムの概要

読み込み確認をするプログラムでは、HTML1ファイルを使います。
CDNから読み込んで、表示させるだけのプログラムです。

HTMLサンプルプログラム

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>CDNから読み込む</title>
        <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    </head>
    <body>
        <div id="sample">
            {{ message }}
        </div>
        <script>
            const app = Vue.createApp({
                data() {
                    return {
                        message: "Hello Vue"
                    }
                }
            })
            app.mount("#sample")
        </script>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>CDNから読み込む</title>

</head>

<body>

</div>

const app = Vue.createApp({

data() {

return {

message: "Hello Vue"

}

})

app.mount("#sample")

</script>

</body>

</html>

実行結果

作成したHTMLをブラウザで開きます。
Vue.jsでCDNから読み込むやり方を解説

Vue.jsが無事読み込めていることが確認できました。

まとめ：Vue.jsをCDNから読み込んでみよう

以上がVue.jsをCDNから読み込むやり方の解説でした！

あなたのご参考になったのなら、とても嬉しいです(*´▽｀*)
ではでは～(・ω・)ﾉｼ