[Vuejs]-Vue.js Pass plugin variable towards custom component

by

2👍

✅

Ok, I have achieved it as follows:

index.js

const Pluginify = {
  install(Vue, configuration = {}) {
    /**
     * Default plugin settings
     *
     * @type {Object}
     */
    this.default = configuration;

....

So in my Plugin.vue component:

import * as plugin from './index';

So I can call in any method of my component the configuration parameters as follows:

...
  mounted() {
    console.log(plugin.default.option1);
  },
...

I hope I can help anyone who gets here with a similar question.

👤leo95batista

2👍

It seems like this listener is added after the create event already fired

  mounted() {
    instance.$on('create', this.create);
  },

You could use a global variable in your plugin like this …

Vue.prototype.$pluginifyConfig = configuration;

and then you can call it with this.$pluginifyConfig in the plugin, or anywhere else.

But that pollutes the global scope

👤Daniel

1👍

Maybe this could help:

const Plugin = {
  template: '<div>Plugin</div>',
  data() {
    return {
        a: 'a data'
    };
  },
  mounted() {
    console.log(this.a);
    console.log(this.message);
  }
};

const Pluginify = {
    install(Vue, options) {
    Vue.component('plugin', {
      extends: Plugin,
      data() {
        return {...options}
      }
    });
  }
};

Vue.use(Pluginify, {message: 'hello, world!'});

new Vue({
    el: '#app'
});
👤Ali

Leave a comment