Using Vue.js plugin in single file component

Question

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>

You can always include the files via script...just check the Without Yarn or Npm section on chartkick.com/vue — Hackerman
– Hackerman, Commented Mar 26, 2018 at 18:02
Hi! Have you found a solution? I'm stuck with the same problem too, just for another plugin — Olenka
– Olenka, Commented Oct 9, 2018 at 8:39

Bharath · Accepted Answer · 2018-05-30 17:28:02Z

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>

a--m · Accepted Answer · 2018-03-26 21:27:47Z

-1

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 })

answered Mar 26, 2018 at 21:27

a--m

4,7921 gold badge42 silver badges60 bronze badges

2 Comments

luke.hawk Over a year ago

Yeah, but I'd rather want to import it in my single-file component and not in my main.js. I don't see the point to import a plugin in the main.js when I only use it in one component! So basically my question was whether it was possible to import it in a single-file component?

Frondor Over a year ago

Even if you want to call Vue.use inside a SFC, the plugin is not aware of that, and all the components/directives/services it is installing, they are going to be global either way. So yes, install plugins in main.js

Collectives™ on Stack Overflow

Using Vue.js plugin in single file component

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related