Vue Stash Share reactive data between components.

A Vue.js plugin that makes it easy to share reactive data between components.


1.) Install package via NPM

$ npm install vue-stash

2.) Install plugin within project.

import Vue from 'vue';
import VueStash from 'vue-stash';



window.Vue = require('vue');


1.) Initialize your store object.

Your store object is nothing more than a simple Javascript object set within your root vue model's $data option; Think of it as your "shared data option". Make sure you pre-initialize any properties that you want to be reactive, just like always.

new Vue({
    el: '#app',
    data: {
        store: {
            user: {
                name: 'cody'

2.) Add a "store" option to any child components that need to access data from the store.

Example 1: Simplest usage

Vue.component('user-card', {
    store: ['user'],
    ready() {
        console.log(; // logs: 'cody' = 'john doe'; // updates this.$ to 'john doe'.
        console.log(; // logs: 'john doe'

3.) Access the store directly.

This plugin sets Vue.prototype.$store which allows any component to access the store via vm.$store.

Vue.component('user-card', {
    ready() {
        console.log(this.$; // logs: 'cody';
        this.$ = 'john doe'; // updates this.$ to 'john doe';
        console.log(this.$; // logs: 'john doe';


If you'd like to demo vue-stash try vue-stack-2.0

For more details and examples visit Github