Pass data from VueJS Plugin to VueJS Component

Question

I'm creating a loading bar plugin for VueJS and I want to control data of a VueJS component (part of the plugin) with the plugin.

So, in the end I want to do the following:

Include plugin in main.js

import VueLoadingBar from 'path-to-plugin';

Vue.use(VueLoadingBar);

Include plugin component in App.vue

<template>
  <div id="app">
    <vue-loading-bar><vue-loading-bar>
  </div>
</template>

In various components I want to animate the progress bar (like e.g. Youtube) with this.$loadingBar.start().

My plugin consists of a plugin JavaScript file...

import LoadingBar from './LoadingBar.vue';

const vueLoadingBar = {
  install () { 
    const loadingBarModule = {
      start () {
        // Start animating by setting the computed `progress` variable in the component, for simple
        // demonstration with setInterval
        setInterval(() => { 
          // How do I set `progress` that updates the component. Or is there an even better way to solve this?
        }, 500);
      }
    }

    Vue.component('vue-loading-bar', LoadingBar);

    Vue.prototype.$loadingBar = loadingBarModule;
  }
}

export default vueLoadingBar;

...and a .vue file

<template>
  <div class="c-loading-bar" :style="style"></div>
</template>

<script>
  export default {
    computed: {
      style () {
        return {
          transform: `translateX(${this.progress}%)`,
        }
      },
      progress() {
        return 0;
      }
      /* other computed data */
    }
  }
</script>

<style>
  .c-loading-bar {
    position: fixed;
    top: 0;
    z-index: 20;
    height: 5px;
    background: red;
  }
</style>

What's the best way to "control" the LoadingBar component from within the plugin (e.g. this.$loadingBar.start())?

Why not do a simple loader component and do a progress prop to control it? If you really want to stick with plugin you can receive prop for progress and fire some events for completed / started — AfikDeri
– AfikDeri, Commented Feb 16, 2017 at 23:20
@AfikDeri I will only include the component once in my application but I want to control (start the loading animation) on various parts of my application (e.g. AJAX, routing, in some other cases). Since I don't want to include a new component every time I'm loading something, I'd need some kind of global "function" (thus why I thought I need this.$loadingBar). How would you receive the prop for progress and fire events in a plugin? — mrksbnch
– mrksbnch, Commented Feb 17, 2017 at 4:48

mrksbnch · Accepted Answer · 2017-02-19 21:41:42Z

1

For anyone interested: In the end, I gave my component a data name

export default {
  data () {
    return {
      name: 'UNIQUE_NAME',
    };
  }
}

and added the following code to my plugin install function

Vue.mixin({
  created() {
    if (this.name === 'UNIQUE_NAME') {
      console.log('You can now access the component with', this);
    }
  },
});

answered Feb 19, 2017 at 21:41

mrksbnch

1,8423 gold badges29 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Pass data from VueJS Plugin to VueJS Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related