Standalone page support about vue-chartjs

[silane]

I've got it to work directly on browser using import map and esm.sh. All you have to do is adding few lines in the header.

<script type="importmap">
  {
    "imports": {
      "vue": "https://unpkg.com/[email protected]/dist/vue.esm-browser.js",
      "chart.js": "https://esm.sh/[email protected]",
      "vue-chartjs": "https://unpkg.com/[email protected]/dist/index.js"
    }
  }
</script>

Then use it inside <script type="module"> and it totally worked.

<div id="app">
  <chart-bar v-bind:options="{responsive: true}" v-bind:data="{
    labels: [ 'January', 'February', 'March' ],
    datasets: [ { label: 'foo', data: [40, 20, 12] } ]
  }"></chart-bar>
</div>

<script type="module">
import { createApp, ref } from 'vue';
import { Bar } from 'vue-chartjs';
import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale } from 'chart.js';
ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale);

const app = createApp({
  components: { ChartBar: Bar },
});
app.mount('#app');
</script>