vuejs:vue3:load_from_cdn

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 }}

  • vuejs/vue3/load_from_cdn.txt
  • 最終更新: 2021/02/23 23:38
  • by admin