The graph cannot be displayed

Question

I have used vue js and vue chart js latest version until now. I tried drawing a Bar graph and edited the main.js file as follows

import { BarElement, CategoryScale, Chart as ChartJS, Legend, LinearScale, Title, Tooltip } from 'chart.js'
import { createApp } from 'vue'
import { Bar } from 'vue-chartjs'

ChartJS.register(Title, Tooltip, Legend, BarElement, CategoryScale, LinearScale)

const BarChart = {
    name: 'BarChart',
    components: { Bar },
    data() {
        return {
            chartData: {
                labels: ['January', 'February', 'March'],
                datasets: [
                    {
                        label: 'Data One',
                        backgroundColor: '#f87979',
                        data: [40, 20, 12]
                    }
                ]
            }
        }
    },
    template: '<Bar :data="chartData" />'
}
createApp(BarChart).mount('#app')

I only edited the main.js file. The remaining files remain unchanged by default when the project is first created. Running the npm run serve command, the graph cannot be displayed and I receive the warning when opening Developer Tools [Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".at <BarChart>

I want to code the graph in the main.js file but don't want the code in the .vue file, how do I update the code?

Answer 1

I fixed this error by adding runtimeCompiler: true to the vue.config.js file

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  runtimeCompiler: true,
})

The graph is displayed. Thanks!