A React context-like solution for Vue.js
Exposes a set of properties to all of a components descendants.
// Expose a property...const vm = mixins: expose bus: { return bus: thisbus ; }; // ...to be able to inject it in a child componentconst child = parent: vm computed: ... ; childbus; // 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 ; mixins: expose { return bus: ; }
Vue instance properties can also be exposed by passing their names in an array:
mixins: expose 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 ; parent: vm computed: ...
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:
// ... computed: ...
If you're not using the spread operator, you can assign
the properties:
// ... computed: Object
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
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.