Vue plugin, adding global component which takes data

Question

I am using Vue plugins so that user can access a global component once registering the global component and configuring it inside Vue.use. For this I need to pass some data from Vue.use() to Component.vue.

Take a look at the following code:

Vue.use(MyPlugin, { data: true });

the code of MyPlugin is

import Plugin from './plugin';

const IconPlugin = {
  install(Vue, options) {
    console.log(options); // Here I can see {data: true}
    Vue.component('GlobalComponent', Icon);
  },
};

Now I need to pass this options variable to the component. So that a user whenever use

<GlobalComponent />

{data: true} should always be there.

Basically, that is a configuration which user is passing and the further component computation will be dependent on this.

Ja9ad335h · Accepted Answer · 2018-07-11 14:43:07Z

You can use Vue.extend to extend components

var Icon = Vue.extend({
  data: function() {
    return {
      foo: 'fooooo',
      bar: 'barr'
    }
  },
  template: '<div><button @click="doFooStuff">{{foo}}</button><button @click="doBarStuff">{{bar}}</button></div>',
  methods: {
    doBarStuff: function() {
      console.log(this.foo, this.bar)
    },
    doFooStuff: function() {
      console.log(this.foo)
    }
  }
})


const IconPlugin = {
  install(Vue, options) {
    // console.log(options);
    // normalize data (select only props you want)
    var data = Object.assign({}, options);
    var NewIcon = Icon.extend({
      data: function() {
        return data;
      }
    })
    Vue.component('GlobalComponent', NewIcon);
  },
};

Vue.use(IconPlugin, {
  foo: 'FOOO'
});


new Vue({
  el: '#app',
  components: {
    Icon
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <icon></icon>
  <global-component></global-component>
</div>

tony19 · Accepted Answer · 2022-07-16 04:52:47Z

0

it sounds like you want to take a look at the component guide. It would seem that you want to merge the data with where you are passing Icon.

edited Jul 16, 2022 at 4:52

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 11, 2018 at 14:01

anon

1 Comment

void Over a year ago

This should rather be a comment.. But yes i want to pass options in Vue.component method

Collectives™ on Stack Overflow

Vue plugin, adding global component which takes data

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related