目次

Vue.js 3.x を CDN からロードする

ESM 形式でのライブラリロードに挑戦します。

サンプルコード

Vue というグローバルオブジェクトを呼び出す形で実装したかったのですがオブジェクトが見つからず、その中身である createApp などを直接呼び出す様です。
Vue という形で呼び出すには import * as Vue from ...; という形で呼び出せばよいだけでした。この場合、createApp を Vue.createApp() で呼び出せます。 

<div id="counter">
  Counter: {{ counter }}
</div>

<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.global.js"></script> -->

<script type="module">
//import { createApp } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js';
import * as Vue from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.esm-browser.js';

const CounterApp = {
  data() {
    return {
      counter: 0
    }
  },
  mounted() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}

Vue.createApp(CounterApp).mount('#counter')
</script>

実行

Counter: {{ counter }}