In my Vue 3 project i want to use chart.js/chartkick but i cant see the chart on the page.
I get this error message:
[Vue warn]: Failed to resolve component: line-chart
at <SimulateGame onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< undefined > >
at <RouterView>
at <App>
My Vue:
<template>
<line-chart :data="tomb"></line-chart>
</template>
<script>
data() {
return {
tomb: {
'2020-01-02': 2,
'2020-02-03': 3,
'2021-01-01': 5
}
}
</script>
My main.js:
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import firebase from 'firebase'
import "firebase/firestore";
import Chartkick from 'vue-chartkick';
import Chart from 'chart.js';
import Vue from 'vue';
Vue?.use(Chartkick.use(Chart));
const firebaseConfig = {
apiKey: "AIzaSyANClDMGn18RLgjFvPRf22XZ8H4mHeNoUU",
authDomain: "vue-auth-6de17.firebaseapp.com",
projectId: "vue-auth-6de17",
storageBucket: "vue-auth-6de17.appspot.com",
messagingSenderId: "207202760374",
appId: "1:207202760374:web:9479a5450810e3b066d817"
};
firebase.initializeApp(firebaseConfig)
export const db = firebase.firestore();
createApp(App).use(router).mount('#app')
I use 'Vue?.use' cuz i got error on 'Vue.use'.
Can anyone know why i get this error?
This won't work Vue?.use(Chartkick.use(Chart));
here's a way that should solve it
const app = createApp(App);
app.use(router);
app.use(VueChartkick);
app.mount('#app');
The reason is you need to use it on the instance and not the Vue. This is because of the changes in how Vue3 works.