CODEWITHSUNDEEP
javascriptvue.jsvue-component
luke.hawk
luke.hawk

Reputation: 109

Using Vue.js plugin in single file component

I would like to use the vue-chartkick plugin, but want to register it within my single-file components rather than using it globally. Is there a way to achieve the same as

Vue.use(VueChartkick, { Chartkick })

in a single-file component? I've tried to import the plugin and then registered it as a component, but it keeps on telling me that the according component was not defined. This is my single-file component:

<template lang="pug" >
div
    area-chart(:data="monthlyRevenue")              
</template>
<script>

import Api from '../../../api';
import Chartkick from 'chartkick';
import VueChartkick from 'vue-chartkick'
import Chart from 'chart.js';

export default {
    name: 'reporting',
    components: {
        'area-chart': AreaChart
    },
    data() {
        return {
            monthlyRevenue: {}
        }
    },
    created() {
        Api.get(window.location.pathname)
          .then((response) => {
            this.monthlyRevenue = response.body;
          })
          .catch((response) => {
            this.handleErrors(response.body);
          });
    }
}
</script>

Upvotes: 3

Views: 3721

Answers (2)

Bharath
Bharath

Reputation: 69

You would need to create a new Vue object and declare it as a component in your single file component. I'm not too familiar with VueChartKick. But this might work.

<template lang="pug" >
div
    area-chart(:data="monthlyRevenue")              
</template>
<script>

import Vue from 'vue';
import Api from '../../../api';
import Chartkick from 'chartkick';
import VueChartkick from 'vue-chartkick'
import Chart from 'chart.js';

// attach your other plugins in here as required
Vue.use(VueChartkick, {Chartkick});
const newCustomComponent = new Vue();

export default {
    name: 'reporting',
    components: {
        'area-chart': AreaChart,
        newCustomComponent: newCustomComponent,
    },
    data() {
        return {
            monthlyRevenue: {}
        }
    },
    created() {
        Api.get(window.location.pathname)
          .then((response) => {
            this.monthlyRevenue = response.body;
          })
          .catch((response) => {
            this.handleErrors(response.body);
          });
    }
}
</script>

Upvotes: 2

a--m
a--m

Reputation: 4782

In you main.js file add the plugin initialisation:

import Chartkick from 'chartkick'
import VueChartkick from 'vue-chartkick'
import Chart from 'chart.js'
Vue.use(VueChartkick, { Chartkick })

Upvotes: -1

Related Questions