Demystifying Vuex — The state container for Vue

Vuex is the de facto state management pattern library for Vue.js. Vuex lets us write clean, maintainable, and scalable code. If you’re looking to learn the concepts behind Vuex — look no further.

Vuex, Redux, and other state containers are crucial for building apps that scale. In simple words, state containers force us to do things in certain ways to write clean code.

How do I know if I need a state container?

From Zero to Hero with Vue — Styling, Computed Props, Slots

So far we learned the basics of Vue and how to set up a nice workflow with Parcel. But what if we want to make our app look nice?

Tell you what — why don’t we make our counter appear green when it’s over 1, red when it’s below 0 and grey when it’s 0. The logic should look like this;

How would you do this?

We start with the Counter.vue component.

preparing the styles for the sum

I prepared 3 classes — .red, .green and .grey — each corresponding to their appropriate color.

From zero to hero with Vue — Advanced Components, Parcel, Dev Tools

So far we made a simple Vue component which renders plain HTML. What if we want the component to have interactivity? Here’s how we can to that.

Let’s create a counter component. Be my guest to implement the counter component before continuing…learning by doing is the most efficient way to mastering. 👍

Implementing the counter component

A counter is simple. The counter has 3 moving pieces

  • The sum of the counter
  • The decrement button
  • The increment button

From Zero to Hero with Vue — Input handling, Loops, Components

You made it far — but the our path is even further. Keep on reading and learning to become a Vue master. We learned the basics so far, let’s continue.

Input handling

v-model directive

Forms play a key role in any modern application, from login screen to dashboards.

Let’s make our message dynamic. By making the input interactive — we can decide what our message property will be. Keep in mind, all inputs should be wrapped inside a form tag.

Creating our first v-model

That’s all there is to simple inputs with Vue! Just create a simple input and attach a v-model directive to it and watch the magic happen.

From Zero to Hero with Vue — getting up and running

Alright! Let’s get our hands dirty! All we need is a text editor and a browser. I will be using Visual Studio Code paired with Google Chrome.

Table of contents:

  • Getting started, understanding the basics, “hello world”
  • Directives
  • Methods
  • Conditional statements

“Hello World”

From Zero to Hero with Vue - But first, why Vue?

Vue has taken the Javascript world by storm - and for a good reason. Vue is a great tool to work with. I had the pleasure to work for a company who made Vue applications and I found it a blast!

It’s safe to say Vue has proven itself and has a bright future ahead. Why not give Vue a try? After all, being a developer means being a student for life.

Source: Official Vue Documentation

If you know the “why” already, here’s the link to get started with coding. By the time you finish this series, you’ll be a master of Vue.

Has Vue passed React in popularity yet?

As as skeptic, Vue passing React in Github stars was something I didn’t believe until I checked it out myself.

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now