Vue.js Pass plugin variable towards custom component

Question

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

leo95batista · Accepted Answer · 2020-05-12 19:36:21Z

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.

answered May 12, 2020 at 19:36

leo95batista

7771 gold badge11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel · Accepted Answer · 2020-05-12 19:43:10Z

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

answered May 12, 2020 at 19:43

Daniel

35.9k17 gold badges115 silver badges162 bronze badges

Comments

Ali · Accepted Answer · 2020-05-12 19:53:05Z

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

answered May 12, 2020 at 19:53

Ali

1,0959 silver badges17 bronze badges

Collectives™ on Stack Overflow

Vue.js Pass plugin variable towards custom component

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related