How to install vue-chartkick and use it in my components? - laravel

Question

I am using vue-chartkick with Laravel. I followed the documentation to install it.
npm install vue-chartkick chart.js
Then, in resources/js/app.js:
import Chartkick from 'vue-chartkick'
import Chart from 'chart.js'
Vue.use(Chartkick.use(Chart))
...
const app = new Vue({
el: '#app',
router: router,
vuetify: new Vuetify()
});
Then, when I put <line-chart :data="{'2017-01-01': 11, '2017-01-02': 6}"></line-chart> into a component, I get the following error in javascript console:
[Vue warn]: Unknown custom element: <line-chart> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
found in
---> <Dashboard> at resources/js/components/backend/Dashboard.vue
<VApp>
<Root>
What is the correct way to register the component ?

Answer 1

just use chart.js version 2.9 and vue-chartkick 0.6.1
npm install vue-chartkick#0.6.1 chart.js#2.9 --save
and import in app.js like below:
import {Chart} from 'chart.js'
import Chartkick from 'vue-chartkick'
Vue.use(Chartkick.use(Chart));

Answer 2

I used Chartkick with Fastapi. I struggled to implement it on the backend (no npm installer), then found the solution at https://github.com/ankane/vue-chartkick#installation
Put the code inside your main template file eg index.html:
My main.js file, running on fastapi server:
import { MyTitle } from "./title.js";
import { MyName } from "./name.js";
export const app = Vue.createApp({
delimiters: ["[[", "]]"],
data() {
return {};
},
});
app.component("MyTitle", MyTitle);
app.component("MyName", MyName);
app.use(VueChartkick);
const vm = app.mount("#app");