React Context in Vue

This article is about switching to Vue.js with Context mindset.

I think these days every developer have heard about the context in React.js, So I’ll straightly go over the code and the solution. If you’re not familiar with Reacts context click on the link.

Provide And Inject

If you are a React developer and thinking like React “context” you cannot work with Vue.js without the Provide and Inject feature (I mean it’s hard, really).

Let’s see a simple example of Provide and Inject:

A simple example of Provide and Inject

So basically “Provide” it’s for passing data or methods to the children with “Inject” property, regardless of how deep they are, But what will be solved exactly?

1. Not using props to pass the data to children like 5 levels
2. Clean, simple and powerful store management and not using the Vuex when it’s not necessary
3. DRY

Vue source code

These two screenshots are part of provide and injection in Vue source code (after normalisation them).

• Provide: You can write it as Object or a function which returns an Object which you can access to the component context (this) and you can pass method or computed properties or whatever in the component.
• Inject: You can write it as an Array of strings or Object with a default value.
• about resolveInjection function: It’s a simple loop over the inject object and looking for the provider with a “while” loop to resolve it.

Simple store management with Provide and Inject

We’ll build the “famous theme handler” with context to understand how easy and useful is the context.

1. Use Vue cli to bootstrap your project.
2. Now, You can have a structure like this.

As you see we have a weird “context” folder which we’ll look into it in further steps. :)

1. Create a Javascript file in “styles” folder and call it “themes.js” with these contents.

1. Let’s go to “contexts” folder, Create a JS file and call it “Theme.js”.

• We have two components in the same file with the string templates in this case you need the standalone build, here is a helpful section explaining (of course you can have separate files like ThemeProvider.vue and ThemeConsumer.vue).
• First one is our Provider which provides the data and methods to injectors.

Theme.js

• Second one is our Injector (Consumer) which is able to inject the provided data. actually second one is just a helper to write less code and reuse it every where.

Theme.js

And that’s it, we are good to go. You just need to import the Consumer and then you can access to provided data using “slot-scope”.

1. You’ll need to import and wrap the Provider inside your application root. Unfortunately there’s no Hooks in the current versions of Vue yet to use it like React (useContext).

1. Let see some magics. We have two components which we’ll see the different use cases.

• First component: We see a component which wrapped with the Consumer and you can access to the data and methods by “slot-scope”. You can bind styles and pass the theme variables or you can bind classes and handle the styles and theme using css!

FirstComp.vue

• Second component: We see a component which wrapped with a “div” in template and includes two ThemeConsumer, this means you can have a lot of Consumers in every where also you can override them easily.

SecondComp.vue

Live demo and source code

https://medium.com/media/db4b42c5bcdecd87f5da93b3902772b6/href

Keep in mind

Note: the provide and inject bindings are NOT reactive. This is intentional. However, if you pass down an observed object, properties on that object do remain reactive.

Summing up

No matter if you are working with React or Vue, “Context is everything”! It’s very simple to understand, divide you application code and structure. It solves the problem of passing stuff deep down your component.

Thanks for reading, If there is anything I have missed, or if there is a better way to do something, then please let me know. 🤙

You can find me on Github and Twitter!