CODEWITHSUNDEEP
vue.jsvuejs2vue-component
leo95batista
leo95batista

Reputation: 767

Vue.js Pass plugin variable towards custom component

I am a novice in Vue.js and I am trying to create my first plugin, something very simple, to be able to call it from my application as follows:

app.js

Vue.use(Pluginify, { option1: 1, option2: 2 });

The problem I am having is the following, I have in my index.js file of my plugin, a variable called configuration, this variable is the second argument that I passed to the Vue.use function, the problem is that I need to pass that variable to a custom component I'm creating, but can't. Please could you help me, this is the structure I have so far:

index.js

import Vue from 'vue';
import Plugin from './Plugin';
import { isObject } from 'lodash';

export const instance = new Vue({
  name: 'Plugin',
});

const Pluginify = {
  install(Vue, configuration = {}) { // This variable here, I need to pass it to the ```Plugin.vue``` component
    Vue.component('plugin', Plugin);

    const pluginify = params => {
      if (isObject(params)) {
        instance.$emit('create', params);
      }
    };

    Vue.pluginify = pluginify;
    Vue.prototype.$pluginify = pluginify;
  }
};

export default Pluginify;

I have a component called Plugin that is empty, but I need it to contain the configuration object in order to use its values ​​in the future.

Plugin.vue

<template>

</template>

<script>
import { instance } from './index';

export default {
  name: 'Plugin',
  mounted() {
    instance.$on('create', this.create);
  },
  methods: {
    create(params) {

    }
  }
};
</script>

<style scoped>

</style>

Thank you very much in advance

Upvotes: 0

Views: 1505

Answers (3)

Ali
Ali

Reputation: 1085

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

Upvotes: 1

Daniel
Daniel

Reputation: 35684

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

Upvotes: 2

leo95batista
leo95batista

Reputation: 767

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.

Upvotes: 2

Related Questions