CODEWITHSUNDEEP
javascriptchart.jsvuejs3chartkick
Laboda Dániel
Laboda Dániel

Reputation: 63

Vue3 does not show line-chart

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?

Upvotes: 1

Views: 274

Answers (1)

Daniel
Daniel

Reputation: 35684

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.

Upvotes: 2

Related Questions