← All Articles

Vue.jsのバージョンの確認方法

Posted on

はじめに

本日もVue.jsを学習しています。

CDNで最新版を読み込んでサンプルコードを学習していますが 自分がどのバージョンを利用しているのか気になっていました。

自分なりに調べた確認方法をこちらに記録しておきます。

利用するもの

createAppメソッドで作成されたアプリケーションインスタンスからバージョンが取得できるそうです。

詳細については公式のリファレンスをご確認ください。

Vue.jsを使って表示

ここではVue.jsを使ってブラウザから確認できるようにしました。

以下のソースコードをローカルのhtmlファイルに保存して

ブラウザで開くと「Vue.jsのバージョン: 」の後ろにバージョンが表示されます。

<body>
    <div id="verison">
        <p> Vue.jsのバージョン: {{ version }} </p>
    </div>
    <script src="https://unpkg.com/vue@next"></script>
    <script >
        const Version = {
            data() {
              return {
                version: 0
              }
            }
          }

        const app = Vue.createApp(Version)
        const vm = app.mount('#verison')
        vm.version = app.version //コンポーネントのversionにVueのバージョンを入れる

    </script>
</body>

表示結果のサンプル

自分の環境は3.2.27を使用していることがわかりました。

20220117-1

参考文献

アプリケーション API

技術Vue