CDN Vue.js 3系でVCalendarを動作させられないので諦めた話

JavaScript

2023.06.06

公式サイトが完全に正しいと鵜呑みにしないようにという教訓
他にも不具合があるエンジニアを発見
で、どんなエラーなの？

公式サイトが完全に正しいと鵜呑みにしないようにという教訓

VCalendarの公式にCDN×Vue.js 3のサンプルコードが掲載されていました。早速と試してみるとコンソールエラー。なんでやねん。

下記コードをまんま転用してみたんですよね。

<html>
  <head>
    <meta charset='utf-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
    <meta http-equiv='x-ua-compatible' content='ie=edge'>
  </head>
  <body>
    <div id='app'>
      <VCalendar />
      <VDatePicker v-model='selectedDate' />
    </div>

    <!-- Vue  -->
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <!-- VCalendar (automatically installed) -->
    <script src="https://unpkg.com/v-calendar"></script>

    <script>
      const { createApp } = Vue

      createApp({
        data() {
          return {
            selectedDate: null,
          }
        }
      }).mount('#app')
    </script>
  </body>
</html>

このVCalendar (automatically installed)もイミフ。読み込むのが自動なの？Vueに自動で付属しているの？何の？Webのjsにインストールなんて概念あったっけ？

まったく同じコードをこのページに埋め込んであるのでデベロッパーツールでコンソールエラーを見て見てください。もうね、追う気力も失せましたわ。