A React context-like solution for Vue.js

Exposes a set of properties to all of a components descendants.

// Expose a property...
const vm = new Vue({
    mixins: [expose],

    data: () => ({
        bus: new Bus(),
    }),

    expose() {
        return {
            bus: this.bus,
        };
    },
});

// ...to be able to inject it in a child component
const child = new Vue({
    parent: vm,

    computed: {
        ...inject(['bus']),
    },
});

child.bus; // EventBus instance

Postcardware

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

You're free to use this package (it's MIT-licensed), but if it makes it to your production environment we'd appreciate if you send us a postcard from your hometown, mentioning which of our package(s) you are using.

Our address is: Spatie, Samberstraat 69D, 2060 Antwerp, Belgium.

The best postcards will get published on the open source page on our website.

Install

You can install the package via yarn:

yarn add vue-expose-inject

Use Cases

This package is based on React's context feature. Exposes and inject are useful for giving your components access to global-ish objects, like event busses or authentication data. Expose/inject can make your application harder to reason about, and depends on a certain hierarchy with your components, so use with care!

Usage

Child components can inject properties that are exposed by one of their ancestors. This goes beyond parent-child communitation, the distance between the parent and child, grandchild, etc. doesn't matter.

To get started, expose an object from a parent component by adding the expose mixin and an expose function, which returns the object:

// Parent.js

import { expose } from 'vue-expose-inject';

export default {
    mixins: [expose],

    expose() {
        return {
            bus: new Bus(),
        };
    },
}

Vue instance properties can also be exposed by passing their names in an array:

export default {
    mixins: [expose],

    data: () => ({
        bus: new Bus(),
    }),

    expose: ['bus'],
}

Descendant components can then inject the property using the inject helper function, which uses the same syntax as Vuex's map helpers:

// Child.js

import { inject } from 'vue-expose-inject';

export default {
    parent: vm,

    computed: {
        ...inject(['bus']),
    },
}

If you try to inject a property that hasn't been exposed by an ancestor, an error gets thrown

Injected properties can be renamed by passing in an object instead of an array:

export default {
    // ...

    computed: {
        ...inject({
            myBus: 'bus',
        }),
    },
}

If you're not using the spread operator, you can assign the properties:

export default {
    // ...
    
    computed: Object.assign(inject(['bus']), {
        // My computed properties...
    }),
}

Change log

Please see CHANGELOG for more information what has changed recently.

Testing

$ npm run test

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please contact Sebastian De Deyne instead of using the issue tracker.

Credits

• Sebastian De Deyne
• All Contributors

About Spatie

Spatie is a webdesign agency based in Antwerp, Belgium. You'll find an overview of all our open source projects on our website.

License

The MIT License (MIT). Please see License File for more information.