I have this very simple page, that works properly:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.js"></script>
</head>
<body>
<main id="vue-app">
<p>{{ name }}</p>
<canvas id="chart-flow-rate"></canvas>
</main>
</body>
<script>
// Start VueJS
const Application = {
data() {
return {
name: "My Chart"
};
}
}
vm = Vue.createApp(Application).mount('#vue-app');
// Use ChartJS
const myChart = new Chart('chart-flow-rate', {
type: 'bar',
data: {
labels: ['4', '2'],
datasets: [{
data: [4, 2],
}]
}
});
</script>
However, if I invert the blocs of JS to use ChartJS first and then to create the VueJS application, the page no longer works: the chart is not shown.
Why?
I have noticed that I can change my HTML’s body a little in order to be able to use ChartJS before VueJS:
<body>
<main>
<p id="vue-app">{{ name }}</p>
<canvas id="chart-flow-rate"></canvas>
</main>
</body>
Again: why?
Thanks a lot! 🙂