<![CDATA[ Vuex - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ https://cdn.freecodecamp.org/universal/favicons/favicon.png <![CDATA[ Vuex - freeCodeCamp.org ]]> https://www.freecodecamp.org/news/ Eleventy Wed, 24 Jun 2026 17:36:28 +0000 60 <![CDATA[ Learn Vuex in 5 minutes ]]> https://www.freecodecamp.org/news/learn-vuex-in-5-minutes/ 66d852578acc348be2a441d0 Thu, 28 May 2020 20:37:58 +0000 By Per Harald Borgen

This tutorial will give you a basic understanding of Vuex by building a plan-making application. A user can type in activities and then vote how much they like/dislike them.

Once you've read this tutorial, you can check out our free Vuex course on Scrimba, if you're interested in learning more.

What is Vuex? From Vue's official documentation

Vuex is a state management pattern + library for Vue.js applications.
It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion.

This course assumes that you're somewhat familiar with Vue and we will briefly touch on features like props, components and bindings, but will not review them in great detail. If you'd like to have a quick primer on Vue, feel free to check out this course on Scrimba.

The setup

At Scrimba, complicated setups are something we just don't do.
For this tutorial, we've created a simple HTML file where everything can be written. Feel free to write your own CSS or just copy it from this playground

Vue and Vuex libraries are imported via CDN using <script> tags:

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Activity Voter</title>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vuex/dist/vuex.js"></script>
    <style>
      /*
        ADD CSS HERE
      */
    </style>
  </head>
  <body>
    <div id="app"></div>
  </body>

  <script>
    /*
      ADD VUE CODE HERE
    */
  </script>
</html>

Alternatively, you can also experiment with the code in this Vue Scrimba playground Just remember to relink the playground to your own account.

App plan

We're going to build a voting app, that works especially well when you're in a group of friends not knowing what to do and you have to consider all the options.

The functionality will consist of a user being able to type in an activity and then each activity will have a vote up and down button to count up the totals.

Getting started

First, let's quickly mock our app up in HTML. We will use this layout to then extract into a separate component and we will add functionality for the layout to come to life.

<div id="app">
  <h1>Activity voter</h1>
  <form>
    <input type="text" placeholder="Add Activity" />
    <button id="button">Add Activity</button>
  </form>
  <ul>
    <li>
      <span>
Go Snowboarding</span>
<span>?</span>
        <button>?</button>
        5
        <button>?</button>
      </span>
    </li>
  </ul>
</div>

Image

Add Vuex store with some basic data

Vuex starts with the store. The store is where we keep (store) our state.

<script>
  Vue.use(Vuex);

  const store = new Vuex.Store({

  });

  new Vue({
    el: "#app",
    store
  });
</script>

Let's also add some hard-coded data to the store, that will include one activity and an array with one emoji to display our feelings towards the activity.

<script>
  Vue.use(Vuex);

  const store = new Vuex.Store({
    state: {
      activities: [{ name: "go snowboarding", rating: 5 }],
      emojis: ["?"]
    }
  });

  new Vue({
    el: "#app",
    store
  });
</script>

To allow our state to change reactively, we can use Vuex mapState to handle computed state properties for us.

  new Vue({
    el: "#app",
    store,
    computed: Vuex.mapState(["activities", "emojis"])
  });

Add component

Now we have activities inside our state. Let's render a separate component for each of those activities. Each one will need activity and emojis props.

Vue.component("activity-item", {
  props: ["activity", "emojis"],
  template: `
    <li>
      <span>{{ activity.name }}
        <span>{{ emojis[0] }}</span>
        <button>?</button>
        {{activity.rating}}
        <button>?</button>
      </span>
    </li>
    `
});

Inside app we can now use our newly created component with all the appropriate bindings for activity and emojis. As a quick reminder, if we want to loop over an array and display a component for each item in an array, in Vue, we can use v-for binding.

<div id="app">
  <h1>Activity voter</h1>
  <form>
    <input type="text" placeholder="Add Activity" />
    <button id="button">Add Activity</button>
  </form>
  <ul>
    <activity-item
      v-for="item in activities"
      v-bind:activity="item"
      v-bind:emojis="emojis"
      v-bind:key="item.name">
</activity-item>

</ul>
</div>

Image

Add mutations to store

If we want to update the store in Vuex, we can use mutations. At the moment we will just console.log that a mutation happened and we will implement it afterwards.

const store = new Vuex.Store({
  state: {
    activities: [
      { name: "go snowboarding", rating: 5 },
    ],
    emojis: ["?"]
  },
  mutations: {
    increment(state, activityName) {
      console.log('increment');
    },
    decrement(state, activityName) {
      console.log('decrement');
    },
  }
});

How do we trigger a mutation? We call a commit function on $store with the name of mutations we want to be executed. Any arguments after the name of a mutation are treated as arguments to a committed mutation.

new Vue({
  el: "#app",
  store,
  data() {
    return {
      activityName: ""
    };
  },
  computed: Vuex.mapState(["activities", "emojis"]),
  methods: {
    increment(activityName) {
      this.$store.commit("increment", activityName);
    },
    decrement(activityName) {
      this.$store.commit("decrement", activityName);
    }
  }
});

Add functionality to component

Each activity-item has voting buttons that need to increment and decrement on click of a button. We can pass these functions as props. Let's now bind our methods to props.

<activity-item
  v-for="item in activities"
  v-bind:increment="increment"
  v-bind:decrement="decrement"
  v-bind:activity="item"
  v-bind:emojis="emojis"
  v-bind:key="item.name">
</activity-item>

Let's also not forget to provide activity.name as an argument to both.

Vue.component("activity-item", {
  props: ["activity", "emojis", "increment", "decrement"],
  template: `
    <li>
      <span>{{ activity.name }}
          <span>{{ emojis[0] }}</span>
          <button @click="decrement(activity.name)">?</button>
          {{activity.rating}}
          <button @click="increment(activity.name)">?</button>
      </span>
    </li>
    `
});

And there we go! The flow is working. We can see the console.log statement in the console.

Image

Implement counter

Let's implement the counter. First, we need to find an activity by its name, and then update its rating.

  mutations: {
    increment(state, activityName) {
      state.activities
        .filter(activity => activity.name === `${activityName}`)
        .map(activity => activity.rating++);
    },
    decrement(state, activityName) {
      state.activities
        .filter(activity => activity.name === `${activityName}`)
        .map(activity => activity.rating--);
    }
  }

Perfect, we can now vote on activities.

Image

Use form input to add activity

But of course, we need to be able to add activities too.

Let's create a mutation to the store, that would add an activity to the list of existing activities, with a name that we will later get from the input and a default rating of 0.

 mutations: {
    ...
    addActivity(state, name) {
      state.activities.push({ name, rating: 0 });
    }
  }

Inside methods, we can commit a new activity to the store.

methods: {
    ...
    addActivity(activityName) {
      this.$store.commit("addActivity", activityName);
    }
  }

Implement form submission

Let's wire up the submit function to our HTML form.

<form @submit="onSubmit">
  <input type="text" placeholder="Add Activity" v-model="activityName" />
  <button id="button">Add Activity</button>
</form>

We can now add our submit function to methods. Inside, we're going to use our existing addActivity method and in the end, reset activityName in the input field to an empty string.

methods: {
    ...
    onSubmit(e) {
      e.preventDefault();
      this.addActivity(this.activityName);
      this.activityName = "";
    }
  }

We call e.preventDefault() to avoid the form from reloading on each addition of a new activity.

Image

All the counters now work and the field gets updated. It does look a bit strange, that we have only one emotion for all the activities, no matter what their rating is.

Let's rewrite emojis into an object with some description of what moods they are meant to reflect and clean up existing state, so we start from no activities.

state: {
    activities: [],
    emojis: { yay: "?", nice: "?", meh: "?", argh: "?", hateIt: "?"}
},
...

And as a finishing touch, we can display different emojis depending on the rating an activity has.

Vue.component("activity-item", {
  props: ["activity", "emojis", "increment", "decrement"],
  template: `
    <li>
      <span>{{ activity.name }}
        <span v-if="activity.rating <= -5">{{ emojis.hateIt }}</span>
        <span v-else-if="activity.rating <= -3">{{ emojis.argh }}</span>
        <span v-else-if="activity.rating < 3">{{ emojis.meh }}</span>
        <span v-else-if="activity.rating < 5">{{ emojis.nice }}</span>
        <span v-else>{{ emojis.yay }}</span>
        <button @click="decrement(activity.name)">?</button>
          {{activity.rating}}
        <button @click="increment(activity.name)">?</button>
      </span>
    </li>
    `
});

We start with a blank app, which is what we wanted.

Image

And now if we add back the two activities we used to have in the app, vote on the ratings we have emojis that reflect how we feel about the activities!

Image

You can check out the full code here.

]]> <![CDATA[ The Top JavaScript Frameworks For Front-End Development in 2020 ]]> https://www.freecodecamp.org/news/complete-guide-for-front-end-developers-javascript-frameworks-2019/ 66d460f03bc3ab877dae2230 Fri, 08 Nov 2019 12:45:14 +0000 By Shifa Martin

Front-end developers might know this game already: you type “top JavaScript frameworks” into Google and you get so many JavaScript frameworks from which to choose.

There are always more choices for JavaScript frameworks. And it's always tough to choose a JavaScript framework for front-end development.

So, what are front-end developers looking for in their tech stacks? As a full-time developer, I know it comes down to rapid development and easy-to-make UIs.

Rather than try to be decisive, we, 450+ developers at ValueCoders software development company, voted and shortlisted a few of the best JavaScript frameworks.

Our Vote Goes to React

I was not surprised to see this. Most of our developers voted for React as one of the best JavaScript frameworks. There have been plenty of projects along the way that our front-end developers are handling that highlighted the strengths of the JS framework. React provides a combination of the following:

  • Reusable components
  • Synchronization of state and view
  • Routing and template system

Our developers implement front-end logic by relying heavily on React. At the same time, I was surprised by how simple it was to create applications with React.

Here is an Overview of Our App

The application is simple. It’s a studio management app for music teachers that helps them focus more on their teaching and less on the management of their music studio.

The key challenge was creating one ‘Activity Dashboard’ for teachers where they could manage all their students' activities and track their progress over time. We overcame this challenge by using Redux libraries to build the platform. We built a teacher’s studio from where they could manage their students' progress, showcase new music lessons, chat with them, compare students music playing with live music, and provide them feedback.

Image

So, this is my experience with React JS. But many would argue that Vue is one of the best front-end JavaScript frameworks with many useful tools.

Front-end developers are the ones deciding which JavaScript framework will do the job. In doing so, they face a lot of challenges because they need to decide what they’ve always needed. Often, we have to choose a JavaScript framework now, not after a week of research. In that case, most developers go with what they know. But maybe the stacks you’re familiar with are no longer cutting it in terms of performance.

Even just choosing among Angular, React, an Vue, it is difficult for new developers. Rather than making it more exhaustive for you, here is the list of the top JavaScript frameworks for front-end developers.

The Big 5 JavaScript Frameworks

The five JavaScript frameworks that currently dominate the market in terms of popularity and usage are:

  • React
  • Vue
  • Angular
  • Ember
  • Backbone.js.

They each have large communities. If you are a front-end developer or are going to start your new project on front-end technologies, these five are your best bets. Here’s a look at the npm trends over the last six months.

Image

Image

1. React

React is the definite leader in the JS world. This JavaScript framework uses a reactive approach and also introduces many of its own concepts for front-end web development.

To use React , you’ll have to learn to use a plethora of additional tools to reach high flexibility in front-end development. For example, here's a less exhaustive list of libraries you can use with React: Redux, MobX, Fluxy, Fluxible, or RefluxJS. React can also be used with jQuery AJAX, fetch API, Superagent, and Axios.

Concurrent Mode

React is constantly working towards improving concurrent mode. To take this forward, React Conf 2019 wrapped up last month where the React team talked about improving Concurrent Mode and the Suspense model. Both the features make React apps more responsive by rendering trees without blocking threads. This allows React to focus on high priority tasks like responding to user input.

Suspense

React also introduced Suspense to improve the developer’s experience when handling asynchronous data fetching in React apps. In short, the new update to Suspense lets the component wait until a condition is met.

Hooks are another important update to React 16.8. React hooks lets you use every important feature of React – server-side rendering, accessibility, concurrent mode, and suspense – all without writing a class.

React applications are divided into multiple components that contain both business logic and HTML markup functions. To improve the communication between components, developers can use either Flux or a similar JavaScript library.

React also introduced objects, like state and props. With the state and props objects, you can simply pass data from a component to the layout or from a parent component to a child component.

Introduction to the React ecosystem:

  • The React library plus React router for implementing routes.
  • React-DOM for DOM manipulation.
  • React developer tools for Firefox and Chrome browsers.
  • React JSX, a markup language that mixes HTML into JavaScript.
  • React Create App command line interface to set up a React project.
  • Redux and Axios libraries to organize communication with the backend team.

No doubt, React is one of the most popular JavaScript frameworks. And, I think that React can be your first choice for creating advanced-grade apps.

2. Angular 2 to Angular 9

Angular 9 will mark a turning point revealed by the Angular team at the recent AngularConnect 2019. According to the update, the team is planning to make the Angular Ivy compiler available for all apps. The main benefit of Angular Ivy is that it is able to reduce the size of applications.

Angular today has become very advanced and modular to use for front-end development. Previously you could insert a link to the AngularJS library in the main HTML file, but now you can do the same by installing separate modules.

Angular's flexibility is commendable. That’s why Angular's 1.x versions are still in demand. However, many developers currently rely on Angular 2+ because of its MVC architecture which has changed substantially to a component based architecture.

Angular has a couple of additional challenges. You're almost obliged to use TypeScript to ensure type safety in Angular apps. TypeScript makes the Angular 2+ framework not so pleasant to work with.

Angular’s ecosystem is comprised of:

  • For quick project setup, Angular's command line interface is helpful.
  • Developers will get a set of modules for Angular projects: @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/http, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router, and @angular/upgrade.
  • Angular uses Zone.js a JavaScript library to implement zones in Angular apps.
  • TypeScript and CoffeeScript both can be used with Angular.
  • For communication with server-side apps, Angular uses RxJS and the Observable pattern.
  • Angular Augury for debugging Angular apps.
  • Angular Universal for creating server-side apps with Angular.

Angular2 is a complete JavaScript framework with all the tools a modern front-end developer needs. You can choose Angular if you don’t like to work with additional libraries as with React.

3. Vue

The Snyk JavaScript framework report for 2019 is out. The report mainly focused on security risks in both React and Angular.

The concept of Vue has been taken from Angular and React, but Vue is better in many ways. I’ll talk about its features, but first check out what the Synk report says about Vue's front-end security. Vue has been downloaded 40 million times this year and records only four direct vulnerabilities. All of them have been fixed.

For any front-end developer unfamiliar with Vue, let’s clarify several points.

With Vue you store component logic and layouts along with stylesheets in one file. This is the same way React works, without stylesheets. To let components talk to each other, Vue uses the props and state objects. This approach also existed in React before Vue adopted it.

Similar to Angular, Vue wants you to mix HTML layouts with JavaScript. You have to use Vue directives such as v-bind or v-if to interpolate values from the component logic to templates.

One of the reasons why Vue is worth considering instead of React is because of the Redux library that’s often used in large-scale React applications. As explained in the React section, when a React+Redux app grows bigger, you’ll spend a lot of time applying small changes to multiple files instead of actually working on features. The Vuex library – a Flux-like state management tool designed for Vue – seems less unwieldy than Redux.

If you're choosing between Vue and Angular, the reasons to opt for Vue over Angular can be reduced to the following: Angular is an over-complicated, full-fledged framework with a restrictive nature; Vue is much simpler and less restrictive than Angular.

Another advantage of Vue over Angular and React is that you don’t have to learn JavaScript once more.

An introduction to the VueJS ecosystem:

  • Vuex comes with a dedicated library for application management.
  • Vuex is similar to the concept of Flux.
  • You will get Vue-loader for components and vue.js devtools for Chrome and Firefox browsers.
  • Vue-resource and Axios tools for communication between Vue and the backend source.
  • Vue.js support Nuxt.js for creating server-side applications with Vue; Nuxt.js is basically a competitor to Angular Universal.
  • You will get a Weex JavaScript library with Vue syntax that is used for mobile app development.

Vue is excellent in terms of its workflow to other frameworks. I might opt for Vue because it’s less complicated than React and Angular JS and a great choice for developing enterprise-level apps.

4. Ember

Ember 3.13 released this year with some new updates and features. Ember is just like Backbone and AngularJS, and is also one of the oldest JavaScript frameworks. But with the new update, Ember 3.13 is compatible with new bug fixes, performance improvements, and deprecation. Tracked property updates have also been introduced that allow simpler ways of tracking state change in the ergonomic system of Ember apps.

Ember has a relatively intricate architecture, which will allow you to quickly build huge client-side applications. It realizes a typical MVC JavaScript framework, and Ember’s architecture comprises the following parts: adapters, components, controllers, helpers, models, routes, services, templates, utils, and addons.

One of Ember’s best features is its command line interface tool. The Ember CLI helps front-end developers be highly productive and lets them complete projects on time. You can not only create new projects with ready setups, but you can also create controllers, components, and project files using automatic generation.

The EmberJS ecosystem is comprised of:

  • Ember CLI tool for quick prototyping and managing dependencies.
  • Ember server built into the framework for the development of apps.
  • You'll get Ember.js library and Ember Data for data management.
  • Handlebars template engine for Ember applications.
  • QUnit testing framework for Ember.
  • Ember Inspector development tool for Chrome and Firefox browsers.
  • Ember Observer for public storage and Ember addons to implement generic functionalities.

Although Ember is underrated, it's perfect for creating complex client-side apps.

5. Backbone.js

Backbone is a JavaScript framework based on the MVC architecture. In Backbone.js, the View of MVC helps implement component logic similarly to a Controller. Backbone view can use engines like Mustache and Underscore.js.

Backbone is an easy to use JavaScript framework that allows for quick development of single page applications. To use Backbone.js to the fullest extent, you’ll have to choose tools: Chaplin, Marionette, Thorax, Handlebars or Mustache, and so on.

If you need to design an app that has different types of users, Backbone collections (arrays) can be used here to separate the models. Backbone.Events can be used with Backbone models, collections, routes, and views.

Introducing the BackboneJS ecosystem:

  • The Backbone library consists of events, models, collections, views, and router.
  • Underscore.js, a JavaScript library with helper functions that you can use to write cross-browser JavaScript.
  • You can use template engines such as Mustache and jQuery-tmpl.
  • BackPlug online repository with a lot of ready solutions for Backbone-based apps.
  • Backbone generator CLI for building Backbone apps.
  • Marionette, Thorax, and Chaplin JavaScript libraries to develop an advanced architecture for Backbone apps.

Backbone.js is a perfect choice for front-end and back-end development as it supports REST APIs that are used to synchronize the front-end and back-end.

Need More Help?

All front-end developers out there, if you need help with JavaScript frameworks, feel free to get in touch. Or, you can also contact us to hire ReactJS developers, Vue developers, or Angular developers.

_Or, leave me a note or Tweet out to me._

Remember this article gives you a general roadmap on JavaScript frameworks. Tell me if I have missed something, and we can discuss that. I hope it will also help achieve your front-end development goals.

]]> <![CDATA[ How to build a SPA using Vue.js, Vuex, Vuetify, and Firebase: adding authentication with Firebase ]]> https://www.freecodecamp.org/news/how-to-build-a-spa-using-vue-js-vuex-vuetify-and-firebase-adding-authentication-with-firebase-d9932d1e4365/ 66d460d8a326133d12440a6e Wed, 28 Nov 2018 01:13:39 +0000 By Jennifer Bland

Part 4: learn how to use Firebase to add authentication and a cart

Image Meal Prep application

Learn how to create a meal delivery website using Vue.js, Vuex, Vue Router, and Firebase.

This is part four of my four-part series on building a Vue application. Here is a list of all the parts:

Part 1: Installing Vue and Building an SPA using Vuetify and Vue Router

Part 2: Using Vue Router

Part 3: Using Vuex and accessing API

Part 4: Using Firebase for Authentication & Cart

Recap

In the first part of this series, we created our Vue application using the Vue CLI. Also, we added Vuetify to the app. We used Vuetify to style our home page.

In the second part, we used Vue Router to add navigation between the different pages of our app. We added components for all the pages in our application.

In the third part, we were introduced to Vuex. We signed up for an API to provide recipes and used axios to retrieve them. This data was stored in the Vuex store which made it accessible to every component in the application.

What is Firebase?

Firebase is a real-time cloud infrastructure for client-side apps. Firebase can turn any Frontend application into a full-stack product capable of scaling infinitely in the cloud. It abstracts away most of your complex server-side features like user authentication, data persistence, file storage, and microservices, so you can focus on building an awesome experience for the end user.

The first step is to go to firebase and create a new account. Log in to the account that you created. You will see this dashboard:

Image Firebase Demo

Click the Add Project button. Enter a name for your project. I entered “meal-prep” for the name of my project. Check all checkboxes. Then click the create project button.

Image Add new project dialog on Firebase

Once your project is created, Firebase will take you to your project’s home page.

Image Project Home Page

We need to integrate our project’s configuration into our meal-prep application. Click on the web button to add Firebase to your application. (NOTE: if you are not sure which button that is, it is the button with the <;/>. In the image above, the button is right above the words “get started.” Click the copy button to copy the snippet to your clipboard.

Image Firebase config snippet

Next, we need to incorporate this snippet into our meal prep application. You can initialize your firebase application in the main.js file. You can do it in the App.vue file.

Instead, we are going to create a new directory called firebase in the src folder. Inside this new directory create a file called index.js. Paste the contents of your clipboard into this file. Remove the two lines with the script tags. In the first line of the file import firebase. On the last line initialize firebase. Your file should look like this:

import firebase from 'firebase';const config = {    apiKey: "<youKeyHere>",    authDomain: "<youKeyHere>",    databaseURL: "<youKeyHere>",    projectId: "<youKeyHere>",    storageBucket: "<youKeyHere>",    messagingSenderId: "<youKeyHere>"};firebase.initializeApp(config);

We are importing firebase from an npm package that we have not installed yet. Let’s install it now. In your terminal, install firebase with this command:

npm install firebase --save

Now that we have installed firebase and created a config file, we need to add this file to our application so Vue is aware of it. Open up the main.js file and import in the config file we created. Here is what my main.js file looks like:

import '@babel/polyfill';import Vue from 'vue';import './plugins/vuetify';import App from './App.vue';import router from './router';import store from './store';import '@/firebase/';Vue.config.productionTip = false;new Vue({    router,    store,    render: h => h(App)}).$mount('#app');

Go back to your firebase console in the browser. Click on Authentication. Click on the set up sign-in method button.

Image Setting up authentication in firebase

In the list of sign-in providers, click on Email/Password:

Image List of sign-in providers

Enable the option to all users to sign up using their email address and password. Then click the save button.

Image Enable sign up using email and password

Creating Sign Up Form

In a previous post, we stubbed out the Join.vue and Signin.vue files. These two files will have almost the same code. We will create the Join form first. When we are finished we will copy/paste it into the Signin form.

Open the Join.vue component. You can remove everything that is in the template. Vuetify has a default layout structure for components. It flows like this:

  • v-container
  • v-layout
  • v-flex

So let’s create that layout now in the component. The start of our file looks like this:

<template>    <v-container fill-height>        <v-layout align-center justify-center>            &lt;v-flex xs12 sm8 md4>            </v-flex>        </v-layout>    </v-container></template>

For the v-container we are adding fill-height. We add this so that it centers the form vertically in the window. For the v-flex we add xs12 sm8 and md4 values. This is similar to Bootstrap’s column width definition. On extra-small devices, the form will take up all 12 columns meaning the whole screen. On small devices, the form will be 3/4 of the screen wide. On medium and large screens the form will be 1/3 of the screen.

Inside the v-flex we are going to use a v-card. We add class=”elevation-12" to the v-card so that it appears to be floating above the page. For the top of the form, we will use a v-toolbar. We give it a color of primary. For the default installation of Vuetify the primary color is blue. We want the text in the toolbar to be white text instead of the default black. To turn the text white we add dark to the v-toolbar.

Next, we have a v-card-text. Inside of it, we have a v-form. For the form we are giving it a reference with the name of form. We are assigning it to the v-model with a value of valid.

The last thing we add is lazy-validation. Our form needs to capture the user’s email and password. We will use two v-text-field to capture these values. To make things look better I have prepended an icon for each field. Each field has a v-model and rules.

Before the form is submitted the field will be validated against all rules that are defined. If they pass then you can submit the form. We will take advantage of this when the user clicks the Join button.

The last item to add to the form is a button. We add a v-card-actions and add a button. Here is what the template looks like for our component:

<template>    <v-container fill-height>        <v-layout align-center justify-center>            &lt;v-flex xs12 sm8 md4>                <v-card class="elevation-12">                    <v-toolbar dark color="primary">                        <v-toolbar-title>Join Form</v-toolbar-title>                    </v-toolbar>                    <;v-card-text>                        <v-form ref="form" v-model="valid" lazy-validation>;                            &lt;v-text-field prepend-icon="person" name="email" label="Email" type="email"                                          v-model="email" :rules="emailRules" required>                            </v-text-field>                            <v-text-field prepend-icon="lock" name="password" label="Password" id="password"                                          type="password" required v-model="password" :rules="passwordRules">                            </v-text-field>                        </v-form>                    </v-card-text>                    <v-card-actions>                        <v-spacer></v-spacer>                        <v-btn color="primary" :disabled="!valid" @click="submit">Join</v-btn>                    </v-card-actions>                </v-card>            </v-flex>        </v-layout>    </v-container></template>

We defined several models in our template. We need to add them to the data section of our script. In the script add a data object. We will add valid, email, password, emailRules and passwordRules.

Email and password will contain the values the user inputs into the two text fields. Valid will tell if our form has passed all the rules we have created. For email, we check to make sure that the field is not empty. We also check that the contents match a basic RegExp to validate the email address. For password, we check to make sure the field is not empty. We also check to make sure the password is at least six characters in length.

Here is what the data object looks like now:

data() {    return {        valid: false,        email: '',        password: '',        emailRules: [            v => !!v || 'E-mail is required',            v => /.+@.+/.test(v) || 'E-mail must be valid'        ],        passwordRules: [            v => !!v || 'Password is required',            v =>                v.length >= 6 ||                'Password must be greater than 6 characters'        ]    };},

The last thing we need to add is methods. In methods, we have submit(). This method will validate our form first. If it passes validation then it will call an action in our Vuex store called userJoin. We pass it the email and password the user entered in the form.

Here is what the methods look like:

methods: {    submit() {        if (this.$refs.form.validate()) {            this.$store.dispatch('userJoin', {                email: this.email,                password: this.password            });        }    }}

Creating userJoin Action in Vuex

Open up the store.js file. We will create a new action called userJoin. By default the first parameter passed to this action is context. I will use object destructuring to get just commit from context. Commit is how I will call my mutation.

I will be using firebase to create the new user in the firebase database. To be able to use firebase in the store, I will need to import it. At the top of the file import firebase with this command:

import firebase from 'firebase';

Firebase authentication provides a method called createUserWithEmailAndPassword. We will pass the user’s email and password into this method. If it succeeds in registering the user it will return a user object. When it succeeds we will call two mutations: setUser and setIsAuthenticated. Here is what the action looks like:

userJoin({ commit }, { email, password }) {    firebase        .auth()        .createUserWithEmailAndPassword(email, password)        .then(user => {            commit('setUser', user);            commit('setIsAuthenticated', true);        })        .catch(() => {            commit('setUser', null);            commit('setIsAuthenticated', false);        });}

This action calls two mutations. So let’s create then now. In mutations add a new mutation called setUser. Set the state value of user to the payload. Next, create a second mutation called setIsAuthenticated. Set the state value of isAuthenticated to the payload. Here is what the two mutations look like:

setUser(state, payload) {    state.user = payload;},setIsAuthenticated(state, payload) {    state.isAuthenticated = payload;}

In state, we need to add two new value: user and isAuthenticated. Here is what state looks like now:

state: {    recipes: [],    apiUrl: 'https://api.edamam.com/search',    user: null,    isAuthenticated: false},

Test Adding a New User

Start your server with the command npm run serve. Click on the Join button in the navigation. Enter your email and a password and click the join button. When you click the button nothing visible happens. To verify that the user was registered, go the firebase console in your browser. Click on Authentication. You should see a list of users that have been registered for your application. Here you can see that the user I just registered was created.

Image User has been registered

We need to notify the user that they have been successfully created. We will do this but later. First, we are going to copy and paste the contents of the Join.vue component into the Signin.vue component. There are only two changes you will need to make in the template. Change the title to “Login Form.” For the button make the text say “Login.” In the submit method have it dispatch to userLogin. Just to make sure you have it correct, here is what my entire Signin.vue file looks like:

<template>    <v-container fill-height>        <v-layout align-center justify-center>            &lt;v-flex xs12 sm8 md4>                <v-card class="elevation-12">                    <v-toolbar dark color="primary">                        <v-toolbar-title>Login Form</v-toolbar-title>                    </v-toolbar>                    <;v-card-text>                        <v-form ref="form" v-model="valid" lazy-validation>;                            &lt;v-text-field prepend-icon="person" name="email" label="Email" type="email"                                          v-model="email" :rules="emailRules" required>                            </v-text-field>                            <v-text-field prepend-icon="lock" name="password" label="Password" id="password"                                          type="password" required v-model="password" :rules="passwordRules">                            </v-text-field>                        </v-form>                    </v-card-text>                    <v-card-actions>                        <v-spacer></v-spacer>                        <v-btn color="primary" :disabled="!valid" @click="submit">Login</v-btn>                    </v-card-actions>                </v-card&gt;            </v-flex&gt;        </v-layout>    </v-container></template><script>export default {    name: 'Signin',    data() {        return {            valid: false,            email: '',            password: '',            emailRules: [                v => !!v || 'E-mail is required',                v => /.+@.+/.test(v) || 'E-mail must be valid'            ],            passwordRules: [                v => !!v || 'Password is required',                v =&gt;                    v.length >= 6 ||                    'Password must be greater than 6 characters'            ]        };    },    methods: {        submit() {            if (this.$refs.form.validate()) {                this.$store.dispatch('userLogin', {                    email: this.email,                    password: this.password                });            }        }    }};</script><style scoped></style>

That’s it. You have now created both the Join and Login forms.

We need to create the action for Login. Open up the store.js file. Create a new action called userLogin. We will use firebase to login the user. Firebase provides a method called signInWithEmailAndPassword. We will call this method and pass in the user’s email and password they entered into the form. If the user entered their email and password correctly then we will call the two mutations setUser and setIsAuthenticated. Here is what the userLogin action looks like:

userLogin({ commit }, { email, password }) {    firebase        .auth()        .signInWithEmailAndPassword(email, password)        .then(user => {            commit('setUser', user);            commit('setIsAuthenticated', true);        })        .catch(() => {            commit('setUser', null);            commit('setIsAuthenticated', false);        });},

Redirecting to Profile

When a user successfully registers or login, we want to redirect them to their profile. When we created our app initially the Vue CLI 3 it created two routes for us. Those routes were / and /about. Eventually, the profile will contain a list of all recipes that the user has ordered from the menu page. Remember the button we put at the bottom of every recipe? That button will add the recipe to the user’s profile and store it in the database in firebase.

To redirect the user to the profile we will first import router at the top of the store.js file. The router is imported with the command:

import router from '@/router';

Next, in both actions we redirect the user to /about if they successfully register or login. You can do the redirection with this command:

router.push('/about');

If the user fails to register an account or login successfully we will redirect the user to the home page. (NOTE: in a perfect scenario we will provide some notice to the user why the registration or login failed). You can redirect them to the home page with this command:

router.push('/');

To test the redirection, start your server and click on the Login button. Enter the email and password you used when you created your user account. Click the Join button. If everything worked successfully you should be redirected to the About page.

Updating the navigation

The navigation has buttons for Sign In and Join. When a user successfully registers or login we would like to hide these two buttons. In their place, we want to show a Logout button.

Open up the AppNavigation component. We are going to group the two current buttons in a div. We are going to remove the class to hide the buttons on small and extra-small devices. Instead, we will place this class on the div. We add a v-if to the div to only show if the user is currently not authenticated. Below the div we will add a new button for Logout. This new button will have a style of outline with a color of white. When you click on this button it will call the method logout. We add a v-else to this button to show when the user is authenticated.

Next, add a method called logout. This method will call an action in our store called userSignOut.

We also need to add a new computed property called isAuthenticated. This property returns the value of isAuthenticated in the state of our store.

Here is what your AppNavigation should look like:

<template>    <span>        <v-navigation-drawer app v-model="drawer" class="brown lighten-2" dark disable-resize-watcher>            <v-list>                <template v-for="(item, index) in items">                    <v-list-tile :key="index">                        <v-list-tile-content>                            {{item.title}}                        </v-list-tile-content>                    <;/v-list-tile>                    <v-divider :key="`divider-${index}`"></v-divider>                </template>            </v-list>        </v-navigation-drawer>        <v-toolbar app color="brown darken-4" dark>            <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>            <v-spacer class="hidden-md-and-up"></v-spacer>            <router-link to="/"&gt;                <v-toolbar-title to="/">{{appTitle}}</v-toolbar-title>;            </router-link>            <;v-btn flat class="hidden-sm-and-down" to="/menu">Menu</v-btn>            <v-spacer class="hidden-sm-and-down"></v-spacer>            <;div v-if="!isAuthenticated" class="hidden-sm-and-down">                <v-btn flat to="/sign-in">SIGN IN</v-btn>                <v-btn color="brown lighten-3" to="/join">JOIN</v-btn>            </div>            <v-btn v-else outline color="white" @click="logout">Logout</v-btn>        </v-toolbar>    </span></template><script>export default {    name: 'AppNavigation',    data() {        return {            appTitle: 'Meal Prep',            drawer: false,            items: [{ title: 'Menu' }, { title: 'Sign In' }, { title: 'Join' }]        };    },    computed: {        isAuthenticated() {            return this.$store.getters.isAuthenticated;        }    },    methods: {        logout() {            this.$store.dispatch('userSignOut');        }    }};</script><style scoped>a {    color: white;    text-decoration: none;}</style>

We need to add the getter and action we just defined. Open up the store.js file. Create a new action called userSignout. This action will use firebase.auth() to sign the user out. After signing the user out, it sets the state variables user to null and isAuthenticated to false. Here is the userSignout method in the store:

userSignOut({ commit }) {    firebase        .auth()        .signOut()        .then(() => {            commit('setUser', null);            commit('setIsAuthenticated', false);            router.push('/');        })        .catch(() => {            commit('setUser', null);            commit('setIsAuthenticated', false);            router.push('/');        });}

Next, we need to add a getters section to the store object. The isAuthenticated getters method will return true or false based on user authentication. Here is what the getters section of the store looks like:

getters: {    isAuthenticated(state) {        return state.user !== null && state.user !== undefined;    }}

Adding Recipes to Database

Once a user is logged in they can click on any recipe to add it to their account. Their recipes will be shown in their profile which is the /about route. We need a database to store these recipes. Go to your firebase console in the browser. Click on database in the left side navigation panel. On the next screen you will see buttons to create a realtime database or a cloud firestore database. Make sure you create a new realtime database. In the dialog make sure you select to start in test mode. Then click the enable button.

Image Start database in test mode

Now we want to store the user’s recipes in the database. Open up the MealRecipes component. If a user tries to order a recipe and they are not logged in then we should redirect them to the login page. So let’s take care of that now. On the Order button add an @click that calls the method orderRecipe. Be sure to pass in item as an argument to the method. Your button should look like this:

<v-card-actions>    &lt;v-btn color="green" dark @click="orderRecipe(item)">Order</v-btn></v-card-actions>

Before we create our method, we will create a computed value for isAuthenticated. This is the exact same code we used in AppNavigation earlier to show and hide the login and logout button correctly. Add a computed isAuthenticated. It should look like this:

export default {    name: 'MealRecipes',    computed: {        recipes() {            return this.$store.state.recipes;        },        isAuthenticated() {            return this.$store.getters.isAuthenticated;        }    }};

Now we are ready to create our orderRecipe method. Add this method and its parameter. In this method, we want to first check if the user is logged in or not. If they are not we want to redirect them to /sign-in . If they are signed in then we want to call an action in the Vuex store that will append the recipe to the user account in the database. Here is what our method looks like:

methods: {    orderRecipe(item) {        if (this.isAuthenticated) {            this.$store.dispatch('addRecipe', item);        } else {            this.$router.push('/sign-in');        }    }}

Open up the store.js file. We need to create a new action to add recipes. In this action, we are going to use firebase to add the recipe to a database called users. When the user was registered in firebase they were assigned a unique userid. We will be using this uid to store the name of the recipe in the database.

In this action, we will be using state to get the value of the currently selected user. The user in state is an object. That object has a key called user. In that object, we will find the uid. We use that to push the title of the selected recipe into the database. Here is the action:

addRecipe({ state }, payload) {    firebase        .database()        .ref('users')        .child(state.user.user.uid)        .push(payload.recipe.label);}

Now start your server and log in. Select a diet from the menu page. Then order a couple of recipes. The recipes you ordered should be shown in the database in firebase.

Image Recipes added to the database

Now that we have the recipes added to the database, we actually need to display them on the profile page for the user. Open up the About.vue file. Whenever this page is loaded it should fetch all the user’s recipes. To do this we add mounted() in our script. This will call a method called getRecipes.

Let’s create that method now. In the method, we are going to call an action in our Vuex store that will get all the user’s recipes. We have not created this action in the store yet but in simple terms, this action will get the user’s recipes. Then it will store them in a variable in state called userRecipes.

Before we leave About.vue, add a computed property for userRecipes. This will return the userRecipes from state in our store. This is what About.vue script should look like:

export default {    name: 'About',    computed: {        userRecipes() {            return this.$store.state.userRecipes;        }    },    mounted() {        this.getRecipes();    },    methods: {        getRecipes() {            this.$store.dispatch('getUserRecipes');        }    }};

Next, open up your store.js file. We need to create the getUserRecipes action. When the user logins we store a variable in state called user. This variable will have the unique user ID assigned to that user when it was registered in firebase. We want to get all the recipes in the users database that have this user ID. Once we get all the recipes we want to set userRecipes to contain them. Here is the getUserRecipes action:

getUserRecipes({ state, commit }) {    return firebase        .database()        .ref('users/' + state.user.user.uid)        .once('value', snapshot => {            commit('setUserRecipes', snapshot.val());        });}

In our mutations, we need to add a setUserRecipes. It looks like this:

setUserRecipes(state, payload) {    state.userRecipes = payload;}

We also need to add a userRecipes in state. We set its initial value to an empty array. Here is my entire state object:

state: {    recipes: [],    apiUrl: 'https://api.edamam.com/search',    user: null,    isAuthenticated: false,    userRecipes: []},

Now that we are getting the recipes we need to display them on the page to the user. So go back to your About.vue file. In the template, we are going to loop through all the user’s recipes and display them. I am going to show you my code for the template first then explain what I have done:

<template>    <v-container >        <v-layout column>;            <h1 class="title my-3">My Recipes</h1>            <div v-for="(item, idx) in userRecipes" class="subheading mb-2" :key="idx">                {{item}}            </div>        </v-layout>    </v-container></template>

I have set the layout to be column. I did this because I want each recipe to be listed on the page. To make things look clearer I have added a title. I added my-3 to add margin-top and margin-bottom so that there is spacing between the title and the list of recipes. Next, I looped through each recipe and display it. This is what the user sees if they have recipes:

Image List of my recipes

This is great, but when if a user logs in and they do not have any recipes? They see the title “My Recipes” and a blank page. This is not a user-friendly design. So let’s change it to display something more friendly.

We will display a button that will take the user to the menu page. In our template, we will add this button. To make the button redirect to the menu page we can add to=”/menu” to the button. Here is my final template for the About.vue component.

<template>    <v-container >        <v-layout column>;            <h1 class="title my-3">My Recipes</h1>            <div v-for="(item, idx) in userRecipes" class="subheading mb-2" :key="idx">                {{item}}            </div>            &lt;v-flex mt-4>                <v-btn color="primary" to="/menu">Go To Menu</v-btn>            </v-flex>        </v-layout>    </v-container></template>

Showing Profile in Navigation

The last thing we need to add is the ability to show a link to the profile in the navigation. Just like the logout button, this should only be shown if the user is authenticated.

Open up the AppNavigation components. We are going to group the profile button and the logout button in a div. This is the same thing we did earlier for the Sign In and Join buttons. Add a div and move the logout button to be inside this div. Add another button for profile. This button will be flat just like the Sign In button.

Here is what my AppNavigation looks like now:

<template>    <span>        <v-navigation-drawer app v-model="drawer" class="brown lighten-2" dark disable-resize-watcher>            <v-list>                <template v-for="(item, index) in items">                    <v-list-tile :key="index">                        <v-list-tile-content>                            {{item.title}}                        </v-list-tile-content>                    <;/v-list-tile>                    <v-divider :key="`divider-${index}`"></v-divider>                </template>            </v-list>        </v-navigation-drawer>        <v-toolbar app color="brown darken-4" dark>            <v-toolbar-side-icon class="hidden-md-and-up" @click="drawer = !drawer"></v-toolbar-side-icon>            <v-spacer class="hidden-md-and-up"></v-spacer>            <router-link to="/"&gt;                <v-toolbar-title to="/">{{appTitle}}</v-toolbar-title>;            </router-link>            <;v-btn flat class="hidden-sm-and-down" to="/menu">Menu</v-btn>            <v-spacer class="hidden-sm-and-down"></v-spacer>            <;div v-if="!isAuthenticated" class="hidden-sm-and-down"&gt;                <v-btn flat to="/sign-in">SIGN IN</v-btn>                <v-btn color="brown lighten-3" to="/join">JOIN</v-btn>            </div>            <div v-else>                <v-btn flat to="/about">PROFILE</v-btn>                <v-btn outline color="white" @click="logout">Logout</v-btn>            </div>        </v-toolbar>    </span></template>

Adding Route Guards

Currently, the user can navigate to the profile page by typing it into the URL of the browser We don’t want to let users do this if they are not logged in. Vue Router provides the ability to add route guards before navigating to a URL. We want to test if a user is authenticated before allowing them to redirect to the /about page.

Open up the router.js file. Route guards work in conjunction with meta tags. Find the /about route. We will add a authRequired meta tag to it. The route should look like this:

{    path: '/about',    name: 'about',    component: () =&gt; import('./views/About.vue'),    meta: {        authRequired: true    }},

Route guards are checked in a method called beforeEach that is part of Vue Router. This method is passed three parameters:

  • the route you are going to
  • the route you came from
  • a next method that continues with the current route

Our beforeEach method will check every route that we are going to to see if it contains the meta tag of authRequired. If it does, it will check to see if the user is Authenticated. If the user is not authenticated it will redirect them to the /sign-in page. If the user is logged in then it will allow the route to proceed. If a user routes to any page that does not have the authRequired meta tag then the route will proceed.

Here is the method I have added to my router to do this checking:

router.beforeEach((to, from, next) => {    if (to.matched.some(record => record.meta.authRequired)) {        if (!store.state.user) {            next({                path: '/sign-in'            });        } else {            next();        }    } else {        next();    }});

Get the Code

Even though this is a 4-part series, you can get the finished code in my GitHub account. Please help me out and star the repo when you get the code.

Summary

In this part of this series, you have learned:

  • What is firebase
  • Using firebase to authenticate users who sign in with email and password
  • Using firebase to store the recipes a user has ordered
  • Using route guards to not users access pages if they are not authenticated
  • Display user’s list of recipes from the database on firebase

If you enjoyed this article please clap for it. If you think somebody else would benefit from this article please share it with them.

If you have any questions or find anything wrong with the code, please leave a comment. If there are other topics you would like for me to write about, please leave a comment.

Here are other articles I have written that you might want to read.

How to add Internationalization to a Vue Application
_¡Hola! Bonjour. Ciao. 你好. Here is how you add internationalization to Vue._medium.freecodecamp.orgInstantiation Patterns in JavaScript
_Instantiation patterns are ways to create something in JavaScript. JavaScript provides four different methods to create…_medium.comHere are 5 Layouts That You Can Make With FlexBox
_The CSS Flexible Box Layout — Flexbox — provides a simple solution to the design and layout problems designers and…_hackernoon.com

Follow Me On Twitter!

]]> <![CDATA[ How to build an SPA using Vue.js, Vuex, Vuetify, and Firebase: use Vuex and access the API ]]> https://www.freecodecamp.org/news/how-to-build-an-spa-using-vue-js-vuex-vuetify-and-firebase-use-vuex-and-access-the-api-f8036aa464ad/ 66c35037f41767c3c96bad03 Mon, 26 Nov 2018 17:35:14 +0000 By Jennifer Bland

Part 3: learn how to use Vuex and access the API to get your recipes

Image Meal Prep application

Learn how to create a meal delivery website using Vue.js, Vuex, Vue Router, and Firebase.

This is part three of my four-part series on building a Vue application. Here is a list of all the parts:

Part 1: Installing Vue and Building an SPA using Vuetify and Vue Router

Part 2: Using Vue Router

Part 3: Using Vuex and accessing API

Part 4: Using Firebase for Authentication

Recap

In the first part of this series, we created our Vue application using the Vue CLI. Also, we added Vuetify to the app. We used Vuetify to style our home page.

In the second part, we used Vue Router to add navigation between the different pages of our app. We added components for all the pages in our application.

Accessing the API

We are building an SPA e-commerce website that sells meal delivery services. In order for this website to work, then we need recipes to create our meals. To generate our recipes we will use the API from Edamam. The Edamam recipe API contains 1.7+ million nutritionally analyzed recipes. The API allows you to filter recipes by diets. This is what we need since we will want to show recipes based on which diet the user has selected.

Create an account with Edamam

The first step is to create your account with edamam. They provide a free account and that is what you want to sign up for. Click this link to go to the Edamam website. Click the sign up button for the Recipe Search API.

Image Edamam API Homepage

Next, you will be presented with three different levels that you can sign up for. We are going to use the free Developer tier. Click the start now button in the developer option.

Image Sign up for the free Developer account

You will be presented with a sign-up form. Complete the form.

Image Sign-up form

After completing the form you will be prompted to log in to your account. When you are logged in to your account, you will be asked to choose the API you need. Instead of clicking on any of the selection, instead, go to the menu and select Get an API key now!

You should see your Recipe Search API key. (NOTE: if you do not have a key then click the create a new application button to create one.) Click on the view button to see the details of your API key. You will have an Application ID and Application Keys. You will need these to access the API for your website.

Image API Keys needed to access Edamam

Creating Menu Page

The menu page is where we will show recipes for each of the three diets we are supporting. These recipes will be retrieved from the Edamam API service.

The first thing we want to do is for the user to select a diet. We can do this by re-using the HomePlans component. We will modify the component to add a button to each diet for users to select. When visitors to the website click on a button they will see the recipes for that diet. But we do not want these buttons to be shown when the component is shown on the home page. So we are going to take care of this.

Open up the HomePlans component. Below the v-card-text section, we are going to add a v-card-actions section. This section will contain the button for users to select the plan. Here is what we are adding to each v-card in this component.

<v-card-actions v-if="['menu'].includes($route.name)">    &lt;v-btn outline block color="green" @click="showRecipes('vegan')">Select This Plan</v-btn></v-card-actions>

For each v-card-actions section, we will have a button. The button has the props of outline and block set. The button will call the method showRecipes when you click on the button. The method is passed a parameter with the text for the selected diet. Make sure you change this to reflect the selected diet. Here is what the template for the HomePlans component looks like now:

<template>    <v-container grid-list-lg>        &lt;v-layout row>            &lt;v-flex xs12 class="text-xs-center display-1 font-weight-black my-5">Available Meal Plans</v-flex>        </v-layout>        <v-layout row wrap>            <v-flex xs12 sm12 md4>                <v-card>                    <v-responsive>                        <v-img src="http://source.unsplash.com/hjCA3ecCXAQ" height="500px">                            <v-container fill-height fluid>                                <v-layout fill-height>                                    <v-flex xs12 align-end flexbox>                                        <span class="headline white--text">KETO</span>                                    </v-flex>                                </v-layout>                            </v-container>                        </v-img>                    </v-responsive>

                    <v-card-text>                        <div>                            <h3 class="headline mb-0">Keto</h3>                            <div>The Keto diet is a high-fat, adequate-protein, low-carbohydrate diet. The diet forces the body to burn fats rather than carbohydrates by putting the body into ketosis.                            </div>                        </div>                    </v-card-text>

                    <v-card-actions>                        &lt;v-btn outline block color="green" @click="showRecipes('keto')">Select This Plan</v-btn>                    </v-card-actions>                </v-card>            </v-flex>

            <v-flex xs12 sm12 md4>                <v-card>                    <v-responsive>                        <v-img src="http://source.unsplash.com/6S27S6pZ6o0" height="500px">                            <v-container fill-height fluid>                                <v-layout fill-height>                                    <v-flex xs12 align-end flexbox>                                        <span class="headline white--text">PALEO</span>                                    </v-flex>                                </v-layout>                            </v-container>                        </v-img>                    </v-responsive>

                    <v-card-text>                        <div>                            <h3 class="headline mb-0">Paleo</h3>                            <div>The Paleo diet requires the sole or predominant consumption of foods presumed to have been the only foods available to or consumed by humans during the Paleolithic era.                            </div>                        </div>                    </v-card-text>

                    <v-card-actions>                        &lt;v-btn outline block color="green" @click="showRecipes('paleo')">Select This Plan</v-btn>                    </v-card-actions>                </v-card>            </v-flex>

            <v-flex xs12 sm12 md4>                <v-card>                    <v-responsive>                        <v-img src="http://source.unsplash.com/1SPu0KT-Ejg" height="500px">                            <v-container fill-height fluid>                                <v-layout fill-height>                                    <v-flex xs12 align-end flexbox>                                        <span class="headline white--text">VEGAN</span>                                    </v-flex>                                </v-layout>                            </v-container>                        </v-img>                    </v-responsive>

                    <v-card-text>                        <div>                            <h3 class="headline mb-0">Vegan</h3>                            <div>The vegan diet abstains from the use of animal products. The vegan diet does not consume meat, diary products, eggs or any all other animal-derived ingredients.                            </div>                        </div>                    </v-card-text>

                    <v-card-actions>                        &lt;v-btn outline block color="green" @click="showRecipes('vegan')">Select This Plan</v-btn>                    </v-card-actions>                </v-card>            </v-flex>

        </v-layout>    </v-container></template>

Image Select This Plan button added to HomePlans component

Now that we have added the button, we want to hide it on the home page and show it on the menu page. To do this we are going to combine the v-if directive and the name we assigned to each route.

In the router.js file, we added our routes. Routes is an array of objects. Each object has a path, name and component. We can use the array includes method to check if the current route is home. Here is what we will add to each v-card-actions sections:

<v-card-actions v-if="['menu'].includes($route.name)">    &lt;v-btn outline block color="green" @click="showRecipes('vegan')">Select This Plan</v-btn></v-card-actions>

Here is what the template for the HomePlans component looks like now:

<template>    <v-container grid-list-lg>        &lt;v-layout row>            &lt;v-flex xs12 class="text-xs-center display-1 font-weight-black my-5">Available Meal Plans</v-flex>        </v-layout>        <v-layout row wrap>            <v-flex xs12 sm12 md4>                <v-card>                    <v-responsive>                        <v-img src="http://source.unsplash.com/hjCA3ecCXAQ" height="500px">                            <v-container fill-height fluid>                                <v-layout fill-height>                                    <v-flex xs12 align-end flexbox>                                        <span class="headline white--text">KETO</span>                                    </v-flex>                                </v-layout>                            </v-container>                        </v-img>                    </v-responsive>

                    <v-card-text>                        <div>                            <h3 class="headline mb-0">Keto</h3>                            <div>The Keto diet is a high-fat, adequate-protein, low-carbohydrate diet. The diet forces the body to burn fats rather than carbohydrates by putting the body into ketosis.                            </div>                        </div>                    </v-card-text>

                    <v-card-actions v-if="['menu'].includes($route.name)">                        &lt;v-btn outline block color="green" @click="showRecipes('keto')">Select This Plan</v-btn>                    </v-card-actions>                </v-card>            </v-flex>

            <v-flex xs12 sm12 md4>                <v-card>                    <v-responsive>                        <v-img src="http://source.unsplash.com/6S27S6pZ6o0" height="500px">                            <v-container fill-height fluid>                                <v-layout fill-height>                                    <v-flex xs12 align-end flexbox>                                        <span class="headline white--text">PALEO</span>                                    </v-flex>                                </v-layout>                            </v-container>                        </v-img>                    </v-responsive>

                    <v-card-text>                        <div>                            <h3 class="headline mb-0">Paleo</h3>                            <div>The Paleo diet requires the sole or predominant consumption of foods presumed to have been the only foods available to or consumed by humans during the Paleolithic era.                            </div>                        </div>                    </v-card-text>

                    <v-card-actions v-if="['menu'].includes($route.name)">                        &lt;v-btn outline block color="green" @click="showRecipes('paleo')">Select This Plan</v-btn>                    </v-card-actions>                </v-card>            </v-flex>

            <v-flex xs12 sm12 md4>                <v-card>                    <v-responsive>                        <v-img src="http://source.unsplash.com/1SPu0KT-Ejg" height="500px">                            <v-container fill-height fluid>                                <v-layout fill-height>                                    <v-flex xs12 align-end flexbox>                                        <span class="headline white--text">VEGAN</span>                                    </v-flex>                                </v-layout>                            </v-container>                        </v-img>                    </v-responsive>

                    <v-card-text>                        <div>                            <h3 class="headline mb-0">Vegan</h3>                            <div>The vegan diet abstains from the use of animal products. The vegan diet does not consume meat, diary products, eggs or any all other animal-derived ingredients.                            </div>                        </div>                    </v-card-text>

                    <v-card-actions v-if="['menu'].includes($route.name)">                        &lt;v-btn outline block color="green" @click="showRecipes('vegan')">Select This Plan</v-btn>                    </v-card-actions>                </v-card>            </v-flex>

        </v-layout>    </v-container></template>

Getting Recipes

When a user clicks on the Add This Plan button it calls the method showRecipes. Let's create this method now. This method will retrieve recipes from the Edamam API. First, we need to install axios by entering this command at the terminal:

npm install axios

To use axios we will need to import it. In the script section of the HomePlans component import it with this command:

import axios from 'axios';

Next, in the export default section of the HomePlans component, we will add our method.

NOTE: I am going to show you how to use axios in a component to get data from an API. BUT then we are going to ditch this code and use Vuex. So from here to the title Using Vuex is code that we will not use it in the final version of our application — but I wanted to show it so you understand it.

The method is called showRecipes and takes one parameter called plan. In this method, I will use axios to get 10 recipes from Edamam based on the diet plan selected. The axios call will be a GET to the URL [https://api.edamam.com/search](https://api.edamam.com/search.).

According to the Edamam API documentation, we are required to use a param called q that contains our query string. We will set this value to the plan parameter that is passed into our method. The documentation also requires us to supply params for app_id and app_key. You will need to set these values to your keys you were assigned when you signed up for the Edamam API.

There are two more params we will use. They are to and from. These params specify the start and end of the number of recipes that are returned. For demo purposes, we will limit it to return just the first 10 recipes.

Our axios call will either succeed or fail. Axios provides a promise so we can use .then and .catch to handle both success and failure. If the call succeeds we want to set the recipes data value equal to the hits array that is returned from Edamam. All responses from axios are contained in the data object. We account for this by first assigning response to response.data. Next, we assign recipes to response.hits.

What if the axios call fails? Well, we use the .catch of the promise to handle a failure. In this case, all we want to do is set recipes to an empty array.

Here is what the method looks like:

export default {    name: 'HomePlans',    data() {        return {            recipes: []        };    },    methods: {        showRecipes(plan) {            axios                .get('https://api.edamam.com/search', {                    params: {                        q: plan,                        app_id: '5b6623d5',                        app_key: '46674aa2193dbb7b88ffd897331e661a',                        from: 0,                        to: 9                    }                })                .then(response => {                    response = response.data;                    this.recipes = response.hits;                })                .catch(() => {                    this.recipes = [];                });        }    }};

Using Vuex

Now we have worked ourselves into a pickle with our code. We originally had a component that showed a picture, title and short description of a diet. We added a button to it to get recipes. Now if we keep going then we will need to add functionality to display the recipes that we retrieved from the Edamam API.

I really don’t want all this functionality placed into this component. I want it to just display the image, title, short description and button. But by having the button in the component, I need a way to handle when the user clicks the button. I also need a way to display recipes. To do this I am going to move the functionality of handling the button click to Vuex.

Vuex is a state management library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. Vuex consists of:

  • The state, which is the source of truth that drives our app;
  • The mutations, which change the value of the state;
  • The actions, which are the possible ways the state could change in reaction to user inputs from the view.

When we created our application using the Vue CLI 3 we specified that we would be using Vuex. As a result, the CLI created the file store.js in the src folder for us.

State will contain the recipes. We will use an actions to make the API call to retrieve recipes. A mutations will be used to update the variable recipe in state with the recipes returned from the actions call.

Open up the store.js file. First, add a new recipes variable in state and assign it to an empty array. Also add a variable called apiUrl. This variable will contain the url for our API call. It should look like this:

export default new Vuex.Store({    state: {        recipes: [],        apiUrl: 'https://api.edamam.com/search'    },    mutations: {},    actions: {}});

Next, we are going to create an action called getRecipes. This action will use axios to get recipes from the API. To use axios we will need to import it. At the top of the file, there are two import commands. Place this after them:

import axios from 'axios';

Earlier I showed you using promises with the axios call. Now I am going to show you how to do the same call using async / await. The method getRecipes will have to be prefixed with async. Inside the method, we have a try catch block. Inside the try block, we will set a variable response to the data returned from the axios call. We put await in front of the axios call. If the call succeeds we will call the mutation setRecipes. SetRecipes will change the state to set recipes to the array of recipes returned from the API call.

If the API call fails it will end up in the catch block. In this scenario, we call the same mutation but pass it an empty array. Here is what the store.js should look like:

import Vue from 'vue';import Vuex from 'vuex';import axios from 'axios';Vue.use(Vuex);export default new Vuex.Store({    state: {        recipes: [],        apiUrl: 'https://api.edamam.com/search'    },    mutations: {        setRecipes(state, payload) {            state.recipes = payload;        }    },    actions: {        async getRecipes({ state, commit }, plan) {            try {                let response = await axios.get(`${state.apiUrl}`, {                    params: {                        q: plan,                        app_id: '<yourAppIdHere>',                        app_key: '<yourAppKeyHere>',                        from: 0,                        to: 9                    }                });                commit('setRecipes', response.data.hits);            } catch (error) {                commit('setRecipes', []);            }        }    }});

Updating HomePlans Component

Let’s go back to our HomePlans component and clean it up. We can remove the import axios line of code. We can remove the data() object. In the showRecipes method, you can delete all of the code. We now need just one line of code to call our action in our Vuex store. To call an action in Vuex you use a dispatch. This is the one line of code for our showRecipes method:

this.$store.dispatch('getRecipes', plan);

Here is what our HomePlans component looks like:

<template>    <v-container grid-list-lg>        &lt;v-layout row>            &lt;v-flex xs12 class="text-xs-center display-1 font-weight-black my-5">Available Meal Plans</v-flex>        </v-layout>        <v-layout row wrap>            <v-flex xs12 sm12 md4>                <v-card>                    <v-responsive>                        <v-img src="http://source.unsplash.com/hjCA3ecCXAQ" height="500px">                            <v-container fill-height fluid>                                <v-layout fill-height>                                    <v-flex xs12 align-end flexbox>                                        <span class="headline white--text">KETO</span>                                    </v-flex>                                </v-layout>                            </v-container>                        </v-img>                    </v-responsive>                    <v-card-text>                        <div>                            <h3 class="headline mb-0">Keto</h3>                            <div>The Keto diet is a high-fat, adequate-protein, low-carbohydrate diet. The diet forces the body to burn fats rather than carbohydrates by putting the body into ketosis.                            </div>                        </div>                    </v-card-text>                    <v-card-actions v-if="['menu'].includes($route.name)">                        <v-btn outline block color="green" @click="showRecipes('keto')">Select This Plan</v-btn>                    &lt;/v-card-actions>                </v-card&gt;            </v-flex>            <v-flex xs12 sm12 md4>                <v-card>                    <v-responsive>                        <v-img src="http://source.unsplash.com/6S27S6pZ6o0" height="500px">                            <v-container fill-height fluid>                                <v-layout fill-height>                                    <v-flex xs12 align-end flexbox>                                        <span class="headline white--text">PALEO</span>                                    </v-flex>                                </v-layout>                            </v-container>                        </v-img>                    </v-responsive>                    <v-card-text>                        <div>                            <h3 class="headline mb-0">Paleo</h3>                            <div>The Paleo diet requires the sole or predominant consumption of foods presumed to have been the only foods available to or consumed by humans during the Paleolithic era.                            </div>                        </div&gt;                    </v-card-text>                    <v-card-actions v-if="['menu'].includes($route.name)">                        <v-btn outline block color="green" @click="showRecipes('paleo')">Select This Plan</v-btn>                    </v-card-actions>                </v-card&gt;            </v-flex>            <v-flex xs12 sm12 md4&gt;                <v-card>                    <v-responsive>                        <v-img src="http://source.unsplash.com/1SPu0KT-Ejg" height="500px">                            <v-container fill-height fluid>                                <v-layout fill-height>                                    <v-flex xs12 align-end flexbox>                                        <span class="headline white--text">VEGAN</span>                                    </v-flex>                                </v-layout>                            </v-container>                        </v-img>                    </v-responsive>                    <v-card-text>                        <div>                            <h3 class="headline mb-0">Vegan</h3>                            <div>The vegan diet abstains from the use of animal products. The vegan diet does not consume meat, diary products, eggs or any all other animal-derived ingredients.                            </div>                        </div>                    </v-card-text>                    <v-card-actions v-if="['menu'].includes($route.name)">                        <v-btn outline block color="green" @click="showRecipes('vegan')">Select This Plan</v-btn>                    </v-card-actions>                </v-card>            </v-flex>        </v-layout>    </v-container></template><script>export default {    name: 'HomePlans',    methods: {        showRecipes(plan) {            this.$store.dispatch('getRecipes', plan);        }    }};</script><style scoped></style>

Displaying Recipes

We have used Vuex to get recipes from the API. We store the array of recipes in the Vuex store. Now we need a new component that will be used to display the recipes. Inside your components folder create a new file called MealRecipes.vue.

In this new component, we will add a computed value for recipes. This computed variable will get its value from Vuex store. Its value will be set to the value of recipes in state. This is what it looks like:

<script>export default {    name: 'MealRecipes',    computed: {        recipes() {            return this.$store.state.recipes;        }    }};</script>

We need to update the template in this component to display our recipes. Vuetify provides a grid-list which creates spacing between items displayed on the page. We will use this functionality by placing it on the v-container that is the root element in our template. Like this:

<v-container grid-list-lg>

</v-container>

Inside the v-container we will have a v-layout. Inside the v-layout we will have a v-flex. We set the layout on the v-layout to be row. We will also add wrap. On the v-flex we will loop through all the recipes in the array and display them. So we need a v-for . Vue now requires you to have an index for every v-for loop. We add an idx and set that to the key. Here is what our MealRecipes component looks like so far.

<v-container grid-list-lg>    <v-layout row wrap>        <v-flex xs12 sm6 md6 lg4 v-for="(item, idx) in recipes" :key="idx">        </v-flex>    </v-layout><v-container>

We will use the Vuetify v-card to display each recipe. This is very similar to the layout we used for the HomePlans component. We will display an image for the recipe, a title and a list of ingredients.

The API call returns an array of recipes. If you look at one entry in the array you will notice that it has a recipe object. Inside that object, we will find a URL for the recipe image, title, and list of ingredients. The API returns two different arrays for the ingredients. The one we will use is the one in the ingredientLines array.

Here is what the MealRecipes component looks like:

<template>    <v-container grid-list-lg>        <v-layout row wrap>            <v-flex xs12 sm6 md6 lg4 v-for="(item, idx) in recipes" :key="idx">                <v-card>                    <v-responsive>                        <v-img :src="item.recipe.image"></v-img>                    </v-responsive>                    <v-card-text>                        <div class="title"&gt;{{item.recipe.label}}</div>                        <div class="subheading">Ingredients</div>                        <ul&gt;                            <li v-for="(ingredient, i) in item.recipe.ingredientLines" :key="i">{{ingredient}}</li>                        </ul>                    </v-card-text>                </v-card>            </v-flex>        </v-layout>    </v-container></template><script>export default {    name: 'MealRecipes',    computed: {        recipes() {            return this.$store.state.recipes;        }    }};</script><style scoped></style>

Now that we have the component finished, we need to use it inside the Menu.vue component. Open the Menu.vue component. Import the MealRecipes component with this command:

import MealRecipes from '@/components/MealRecipes';

Add it to the components like this:

export default {    name: 'Menu',    components: {        HomePlans,        MealRecipes    }};

In the template add mealRecipes below homePlans. Here is what Menu.vue should look like:

<template>    <div>        <home-plans></home-plans>        <meal-recipes></meal-recipes&gt;    </div&gt;&lt;/template><script>import HomePlans from '@/components/HomePlans';import MealRecipes from '@/components/MealRecipes';export default {    name: 'Menu',    components: {        HomePlans,        MealRecipes    }};</script><style scoped></style>

Start the application with the command npm run serve in the terminal. Open your browser to http://localhost:8080 and you will see the application running. Click on menu in the navigation. Then click on any of the diet plans. You should see a list of recipes like this:

Image List of recipes

I want to make two quick changes to how the recipes are styled. First I want to add some more spacing between the recipe title and ingredients. Second I want to add a button to the bottom of every recipe for a person to order.

So open up the MealRecipes component. For the title, I already have a class of title. I am going to add to that a value of my-3. This is equivalent to adding margin-top and margin-bottom to the title. This lets the title offset from the image and the ingredients.

Last change I want to make is to add a button. Inside the v-card and below the v-card-text we will add a v-card-actions. Inside that, we will add a button. We will use the default button with a green color. By default, Vuetify makes the text in buttons black in color. We can change that to white by adding the dark directive. Here is our button:

<v-card-actions>    &lt;v-btn color="green" dark>Order</v-btn></v-card-actions>

Here is our MealRecipes component:

<template>    <v-container grid-list-lg>        <v-layout row wrap>            <v-flex xs12 sm6 md6 lg4 v-for="(item, idx) in recipes" :key="idx">                <v-card>                    <v-responsive>                        <v-img :src="item.recipe.image"></v-img>                    </v-responsive>                    <v-card-text>                        <div class="title my-5"&gt;{{item.recipe.label}}</div>                        <div class="subheading">Ingredients</div>                        <ul&gt;                            <li v-for="(ingredient, i) in item.recipe.ingredientLines" :key="i">{{ingredient}}</li>                        </ul&gt;                    </v-card-text>                    <v-card-actions>                        <v-btn color="green" dark>Order</v-btn>                    </v-card-actions>                </v-card>            </v-flex>        </v-layout>    </v-container></template>&lt;script>export default {    name: 'MealRecipes',    computed: {        recipes() {            return this.$store.state.recipes;        }    }};</script><style scoped></style>

Get the Code

Even though this is a 4-part series, you can get the finished code in my GitHub account. Please help me out and star the repo when you get the code.

Summary

In this part of this series, you have learned:

  • What is Vuex
  • How to get recipes from an API
  • How to use Axios with promises and async / await
  • How to call actions in Vuex store
  • How to mutate state in Vuex

What’s Next

In the next part of this series, we will cover Firebase for authentication. Firebase allows you to develop an application without having to write server-side code.

If you enjoyed this article please clap for it. If you think somebody else would benefit from this article please share it with them.

If you have any questions or find anything wrong with the code, please leave a comment. If there are other topics you would like for me to write about, please leave a comment.

Here are other articles I have written that you might want to read.

Here are 5 Layouts That You Can Make With FlexBox
_The CSS Flexible Box Layout — Flexbox — provides a simple solution to the design and layout problems designers and…_hackernoon.comThink outside the box with CSS shape-outside
_CSS is based off a box model. If you have an image that is a circle that you want to wrap text around, it will wrap…_hackernoon.comWhy Company Culture is Important to Your Career as a Software Engineer
_The impact of a company’s culture is reflected in a company’s ability to achieve their goals and productivity levels…_medium.freecodecamp.org

Follow Me On Twitter!

]]> <![CDATA[ The Vue Handbook: a thorough introduction to Vue.js ]]> https://www.freecodecamp.org/news/the-vue-handbook-a-thorough-introduction-to-vue-js-1e86835d8446/ 66bb5ac6092af3d2a3aa9c0d Thu, 05 Jul 2018 16:45:07 +0000

Get this post in PDF/ePub/MOBI format at vuehandbook.com

Vue is a very popular JavaScript front-end framework, one that’s experiencing a huge amount of growth.

It is simple, tiny (~24KB), and very performant. It feels different from all the other JavaScript front-end frameworks and view libraries. Let’s find out why.

First, what is a JavaScript front-end framework?

If you’re unsure what a JavaScript framework is, Vue is the perfect first encounter with one.

A JavaScript framework helps us to create modern applications. Modern JavaScript applications are mostly used on the Web, but also power a lot of Desktop and Mobile applications.

Until the early 2000s, browsers didn’t have the capabilities they have now. They were a lot less powerful, and building complex applications inside them was not feasible performance-wise. The tooling was not even something that people thought about.

Everything changed when Google unveiled Google Maps and GMail, two applications that ran inside the browser. Ajax made asynchronous network requests possible. Over time, developers started building on top of the Web platform, while engineers worked on the platform itself — browsers, the Web standards, the browser APIs, and the JavaScript language.

Libraries like jQuery and Mootools were the first big projects that built upon JavaScript and were hugely popular for a while. They basically provided a nicer API to interact with the browser and provided workarounds for bugs and inconsistencies among the various browsers.

Frameworks like Backbone, Ember, Knockout, and AngularJS were the first wave of modern JavaScript frameworks.

The second wave, which is the current one, has React, Angular, and Vue as its main actors.

Note that jQuery, Ember and the other projects I mentioned are still being heavily used, actively maintained, and millions of websites rely on them.

That said, techniques and tools evolve, and as a JavaScript developer, you’re now likely to be required to know React, Angular or Vue rather than those older frameworks.

Frameworks abstract the interaction with the browser and the DOM. Instead of manipulating elements by referencing them in the DOM, we declaratively define and interact with them, at a higher level.

Using a framework is like using the C programming language instead of using the Assembly language to write system programs. It’s like using a computer to write a document instead of using a typewriter. It’s like having a self-driving car instead of driving the car yourself.

Well, not that far, but you get the idea. Instead of using low-level APIs offered by the browser to manipulate elements, and building hugely complex systems to write an application, you use tools built by very smart people that make our life easier.

The popularity of Vue

How popular is Vue.js?

Vue had:

  • 7,600 stars on GitHub in 2016
  • 36,700 stars on GitHub in 2017

and it has more than 100,000+ stars on GitHub, as of June 2018.

Its npm download count is growing every day, and now it’s at ~350,000 downloads per week.

I would say Vue is very popular, given those numbers.

In relative terms, it has approximately the same numbers of GitHub stars as React, which was born years before.

Numbers are not everything, of course. The impression I have of Vue is that developers love it.

A key point in time of the rise of Vue has been the adoption in the Laravel ecosystem, a hugely popular PHP web application framework. But since then it has become widespread among many other development communities.

Why developers love Vue

First, Vue is called a progressive framework.

This means that it adapts to the needs of the developer. Other frameworks require a complete buy-in from a developer or team and often want you to rewrite an existing application because they require some specific set of conventions. Vue happily lands inside your app with a simple script tag to start with, and it can grow along with your needs, spreading from 3 lines to managing your entire view layer.

You don’t need to know about webpack, Babel, npm or anything to get started with Vue. But when you’re ready, Vue makes it simple for you to rely on them.

This is one great selling point, especially in the current ecosystem of JavaScript front-end frameworks and libraries that tend to alienate newcomers and also experienced developers that feel lost in the ocean of possibilities and choices.

Vue.js is probably the most approachable front-end framework around. Some people call Vue the new jQuery, because it easily gets in the application via a script tag, and gradually gains space from there. Think of it as a compliment, since jQuery dominated the Web in the past few years, and it still does its job on a huge number of sites.

Vue was built by picking the best ideas of frameworks like Angular, React and Knockout, and by cherry-picking the best choices those frameworks made. And by excluding some less brilliant ones, it kind of started as a “best-of” set and grew from there.

Where does Vue.js position itself in the frameworks landscape?

The two elephants in the room, when talking about web development, are React and Angular. How does Vue position itself relative to those two big and popular frameworks?

Vue was created by Evan You when he was working at Google on AngularJS (Angular 1.0) apps. It was born out of a need to create more performant applications. Vue picked some of the Angular templating syntax, but removed the opinionated, complex stack that Angular required, and made it very performant.

The new Angular (Angular 2.0) also solved many of the AngularJS issues, but in very different ways. It also requires a buy-in to TypeScript which not all developers enjoy using (or want to learn).

What about React? Vue took many good ideas from React, most importantly the Virtual DOM. But Vue implements it with some sort of automatic dependency management. This tracks which components are affected by a change of the state so that only those components are re-rendered when that state property changes.

In React, on the other hand, when a part of the state that affects a component changes, the component will be re-rendered. By default all its children will be re-rendered as well. To avoid this you need to use the shouldComponentUpdate method of each component and determine if that component should be re-rendered. This gives Vue a bit of an advantage in terms of ease of use, and out of the box performance gains.

One big difference with React is JSX. While you can technically use JSX in Vue, it’s not a popular approach and instead the templating system is used. Any HTML file is a valid Vue template. JSX is very different than HTML, and has a learning curve for people on the team that might only need to work with the HTML part of the app, like designers.

Vue templates are very similar to Mustache and Handlebars (although they differ in terms of flexibility). As such, they are more familiar to developers that already used frameworks like Angular and Ember.

The official state management library, Vuex, follows the Flux architecture and is somewhat similar to Redux in its concepts. Again, this is part of the positive things about Vue, which saw this good pattern in React and borrowed it for its ecosystem. And while you can use Redux with Vue, Vuex is specifically tailored for Vue and its inner workings.

Vue is flexible, but the fact that the core team maintains two packages that are very important for any web app (like routing and state management) makes it a lot less fragmented than React. For example: vue-router and vuex are key to the success of Vue.

You don't need to choose or worry if that library you chose is going to be maintained in the future and will keep up with framework updates. Since they are official, they are the canonical go-to libraries for their niche (but you can choose to use what you like, of course).

One thing that puts Vue in a different bucket compared to React and Angular is that Vue is an indie project: it’s not backed by a huge corporation like Facebook or Google.

Instead, it’s completely backed by the community, which fosters development through donations and sponsors. This makes sure the roadmap of Vue is not driven by a single company’s agenda.

Your first Vue App

If you’ve never created a Vue.js application, I am going to guide you through the task of creating one so that you understand how it works.

First example

First I’ll go through the most basic example of using Vue.

You create an HTML file which contains:

<html>
  <body>
    <div id="example">
      <p>{{ hello }}</p>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script>
        new Vue({
            el: '#example',
            data: { hello: 'Hello World!' }
        })
    </script>
  </body>
</html>

and you open it in the browser. That’s your first Vue app! The page should show a “Hello World!” message.

I put the script tags at the end of the body so that they are executed in order after the DOM is loaded.

What this code does is instantiate a new Vue app, linked to the #example element as its template. It's defined using a CSS selector usually, but you can also pass in an HTMLElement.

Then, it associates that template to the data object. That is a special object that hosts the data we want Vue to render.

In the template, the special {{ }} tag indicates that this is some part of the template that's dynamic, and its content should be looked up in the Vue app data.

You can see this example on CodePen.

CodePen is a little different from using a plain HTML file, and you need to configure it to point to the Vue library location in the Pen settings:

Image

Second example: the Vue CLI default app

Let’s level up the game a little bit. The next app we’re going to build is already done, and it’s the Vue CLI default application.

What is the Vue CLI? It’s a command line utility that helps to speed up development by scaffolding an application skeleton for you, with a sample app in place.

There are two ways you can get this application:

Use the Vue CLI locally

The first is to install the Vue CLI on your computer and run the command:

vue create <enter the app name>

Use CodeSandbox

A simpler way, without having to install anything, is to go to CodeSandbox. The link opens the Vue CLI default application.

CodeSandbox is a cool code editor that allows you build apps in the cloud. You can use any npm package, and can easily integrate with Zeit Now for an easy deployment and with GitHub to manage versioning.

Whether you chose to use the Vue CLI locally, or go through CodeSandbox, let’s inspect that Vue app in detail.

The files structure

Beside package.json, which contains the configuration, these are the files contained in the initial project structure:

  • index.html
  • src/App.vue
  • src/main.js
  • src/assets/logo.png
  • src/components/HelloWorld.vue

index.html

The index.html file is the main app file.

In the body it includes just one simple element: <div id="app">. This is the element the Vue application we’ll use to attach to the DOM.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>CodeSandbox Vue</title>
</head>

<body>
  <div id="app"></div>
  <!-- built files will be auto injected -->
</body>

</html>

src/main.js

This is the main JavaScript file that drives our app.

We first import the Vue library and the App component from App.vue.

We set productionTip to false, to avoid Vue outputting a “you’re in development mode” tip in the console.

Next, we create the Vue instance, by assigning it to the DOM element identified by #app, which we defined in index.html, and we tell it to use the App component.

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'
})

src/App.vue

App.vue is a Single File Component. It contains three chunks of code: HTML, CSS, and JavaScript.

This might seem weird at first, but Single File Components are a great way to create self-contained components that have all they need in a single file.

We have the markup, the JavaScript that is going to interact with it, and style that’s applied to it, which can be scoped or not. In this case, it’s not scoped, and it’s just outputting that CSS which is applied like regular CSS to the page.

The interesting part lies in the script tag.

We import a component from the components/HelloWorld.vue file, which we'll describe later.

This component is going to be referenced in our component. It’s a dependency. We are going to output this code

<div id="app">
  <img width="25%" src="./assets/logo.png">
  <HelloWorld/>
</div>

from this component, which you see references the HelloWorld component. Vue will automatically insert that component inside this placeholder.

<template>
  <div id="app">
    <img width="25%" src="./assets/logo.png">
    <HelloWorld/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

src/components/HelloWorld.vue

Here’s the HelloWorld component, which is included by the App component.

This component outputs a set of links, along with a message.

Remember above we talked about CSS in App.vue, which was not scoped? The HelloWorld component has scoped CSS.

You can easily determine it by looking at the style tag. If it has the scoped attribute, then it's scoped: <style scoped>

This means that the generated CSS will be targeting the component uniquely, via a class that’s applied by Vue transparently. You don’t need to worry about this, and you know the CSS won’t leak to other parts of the page.

The message the component outputs is stored in the data property of the Vue instance, and outputted in the template as {{ msg }}.

Anything that’s stored in data is reachable directly in the template via its own name. We didn't need to say data.msg, just msg.

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

Run the app

CodeSandbox has a cool preview functionality. You can run the app and edit anything in the source to have it immediately reflected in the preview.

Image

The Vue CLI

CodeSandbox is very cool for online coding and working without having to setup Vue locally. A great way to work locally is by setting up the Vue CLI (command line interface). Let’s find out more about it.

In the previous example, I introduced an example project based on the Vue CLI. What’s the Vue CLI exactly, and how does it fit in the Vue ecosystem? Also, how do we setup a Vue CLI-based project locally? Let’s find out!

Note: There is a huge rework of the CLI going on right now, going from version 2 to 3. While not yet stable, I will describe version 3, because it’s a huge improvement over version 2, and quite different.

Installation

The Vue CLI is a command line utility, and you install it globally using npm:

npm install -g @vue/cli

or using Yarn:

yarn global add @vue/cli

Once you do so, you can invoke the vue command.

Image

What does the Vue CLI provide?

The CLI is essential for rapid Vue.js development.

Its main goal is to make sure all the tools you need are working along, to perform what you need, and abstracts away all the nitty-gritty configuration details that using each tool in isolation would require.

It can perform an initial project setup and scaffolding.

It’s a flexible tool. Once you create a project with the CLI, you can go and tweak the configuration, without having to eject your application (like you’d do with create-react-app).

When you eject from create-react-app you can update and tweak what you want, but you can’t rely on the cool features that create-react-app provides.

You can configure anything and still be able to upgrade with ease.

After you create and configure the app, it acts as a runtime dependency tool, built on top of Webpack.

The first encounter with the CLI is when creating a new Vue project.

How to use the CLI to create a new Vue project

The first thing you’re going to do with the CLI is to create a Vue app:

vue create example

The cool thing is that it’s an interactive process. You need to pick a preset. By default, there is one preset that provides Babel and ESLint integration:

Image

I’m going to press the down arrow ⬇️ and manually choose the features I want:

Image

Press space to enable one of the things you need, and then press enter to go on. Since I chose Linter / Formatter, Vue CLI prompts me for the configuration. I chose ESLint + Prettier since that's my favorite setup:

Image

Next thing is choosing how to apply linting. I choose Lint on save.

Image

Next up: testing. Vue CLI lets me choose between the two most popular unit testing solutions: Mocha + Chai and Jest.

Image

Vue CLI asks me where to put all the configuration: in the package.json file, or in dedicated configuration files, one for each tool. I chose the latter.

Image

Next, Vue CLI asks me if I want to save these presets, and allows me to pick them as a choice the next time I use Vue CLI to create a new app. It’s a very convenient feature, as having a quick setup with all my preferences is a complexity reliever:

Image

Vue CLI then asks me if I prefer using Yarn or NPM:

Image

This is the last thing it asks me, and then it goes on to download the dependencies and create the Vue app:

Image

How to start the newly created Vue CLI application

Vue CLI has created the app for us, and we can go in the example folder and run yarn serve to start up our first app in development mode:

Image

The starter example application source contains a few files, including package.json:

Image

This is where all the CLI commands are defined, including yarn serve, which we used a minute ago. The other commands are

  • yarn build, to start a production build
  • yarn lint, to run the linter
  • yarn test:unit, to run the unit tests

I will describe the sample application generated by Vue CLI in a separate tutorial.

Git repository

Notice the master word in the lower-left corner of VS Code? That's because Vue CLI automatically creates a repository, and makes the first commit. So we can jump right in, change things, and we know what we changed:

Image

This is pretty cool. How many times do you dive in and change things, only to realize, when you want to commit the result, that you didn’t commit the initial state?

Use a preset from the command line

You can skip the interactive panel and instruct Vue CLI to use a particular preset:

vue create -p favourite example-2

Where presets are stored

Presets are stored in the .vuejs file in your home directory. Here's mine after creating the first "favorite" preset:

{
  "useTaobaoRegistry": false,
  "packageManager": "yarn",
  "presets": {
    "favourite": {
      "useConfigFiles": true,
      "plugins": {
        "@vue/cli-plugin-babel": {},
        "@vue/cli-plugin-eslint": {
          "config": "prettier",
          "lintOn": [
            "save"
          ]
        },
        "@vue/cli-plugin-unit-jest": {}
      },
      "router": true,
      "vuex": true
    }
  }
}

Plugins

As you can see from reading the configuration, a preset is basically a collection of plugins, with some optional configuration.

Once a project is created, you can add more plugins by using vue add:

vue add @vue/cli-plugin-babel

All those plugins are used in the latest version available. You can force Vue CLI to use a specific version by passing the version property:

"@vue/cli-plugin-eslint": {
  "version": "^3.0.0"
}

This is useful if a new version has a breaking change or a bug, and you need to wait a little bit before using it.

Remotely store presets

A preset can be stored in GitHub (or on other services) by creating a repository that contains a preset.json file, which contains a single preset configuration.

Extracted from the above, I made a sample preset which contains this configuration:

{  "useConfigFiles": true,  "plugins": {    "@vue/cli-plugin-babel": {},    "@vue/cli-plugin-eslint": {      "config": "prettier",      "lintOn": [        "save"      ]    },    "@vue/cli-plugin-unit-jest": {}  },  "router": true,  "vuex": true}

It can be used to bootstrap a new application using:

vue create --preset flaviocopes/vue-cli-preset example3

Another use of the Vue CLI: rapid prototyping

Up until now, I’ve explained how to use the Vue CLI to create a new project from scratch, with all the bells and whistles. But for really quick prototyping, you can create a really simple Vue application (even one that’s self-contained in a single .vue file) and serve that, without having to download all the dependencies in the node_modules folder.

How? First install the cli-service-global global package:

npm install -g @vue/cli-service-global

//or

yarn global add @vue/cli-service-global

Create an app.vue file:

<template>    <div>        <h2>Hello world!</h2>        <marquee>Heyyy</marquee>    </div></template>

and then run

vue serve app.vue

Image The standalone app

You can serve more organized projects, composed by JavaScript and HTML files as well. Vue CLI by default uses main.js / index.js as its entry point, and you can have a package.json and any tool configuration set up. vue serve will pick it up.

Since this uses global dependencies, it’s not an optimal approach for anything more than a demonstration or quick testing.

Running vue build will prepare the project for deployment in dist/, and will generate all the corresponding code (also for vendor dependencies).

Webpack

Internally, Vue CLI uses Webpack, but the configuration is abstracted and we don’t even see the config file in our folder. You can still have access to it by calling vue inspect:

Image

The Vue DevTools

When you’re first experimenting with Vue, if you open the Browser Developer Tools, you will find this message: “Download the Vue Devtools extension for a better development experience: https://github.com/vuejs/vue-devtools"

Image Hint to install the Vue devtools

This is a friendly reminder to install the Vue Devtools Extension. What’s that? Any popular framework has its own devtools extension, which generally adds a new panel to the browser developer tools that is much more specialized than the ones that the browser ships by default. In this case, the panel will let us inspect our Vue application and interact with it.

This tool will be an amazing help when building Vue apps. The developer tools can only inspect a Vue application when it’s in development mode. This makes sure no one can use them to interact with your production app — and will make Vue more performant, because it does not have to care about the Dev Tools.

Let’s install it!

There are 3 ways to install the Vue Dev Tools:

  • on Chrome
  • on Firefox
  • as a standalone application

Safari, Edge and other browsers are not supported with a custom extension, but using the standalone application you can debug a Vue.js app running in any browser.

Install on Chrome

Go to this page on the Google Chrome Store and click **Add to Chrome**.

Image

Go through the installation process:

Image

The Vue.js devtools icon shows up in the toolbar. If the page does not have a Vue.js instance running, it’s grayed out.

Image

If Vue.js is detected, the icon has the Vue logo’s colors.

Image

The icon does nothing except show us that there is a Vue.js instance. To use the devtools, we must open the Developer Tools panel, using “View → Developer → Developer Tools”, or Cmd-Alt-i

Image

Install on Firefox

You can find the Firefox dev tools extension in the Mozilla Add-ons store.

Image

Click “Add to Firefox” and the extension will be installed. As with Chrome, a grayed icon shows up in the toolbar

Image

And when you visit a site that has a Vue instance running, it will become green, and when we open the Dev Tools we will see a “Vue” panel:

Image

Install the standalone app

Alternatively, you can use the DevTools standalone app.

Simply install it using:

npm install -g @vue/devtools

//or

yarn global add @vue/devtools

and run it by calling:

vue-devtools

This will open the standalone Electron-based application.

Now, paste the script tag it shows you

<script src="http://localhost:8098"></script>

inside the project index.html file, and wait for the app to be reloaded. It will automatically connect to the app.

Image

How to use the Developer Tools

As mentioned, the Vue DevTools can be activated by opening the Developer Tools in the browser and moving to the Vue panel.

Another option is to right-click on any element in the page, and choose “Inspect Vue component”:

Image

When the Vue DevTools panel is open, we can navigate the components tree. When we choose a component from the list on the left, the right panel shows the props and data it holds:

Image

On the top there are fourbuttons:

  • Components (the current panel), which lists all the component instances running in the current page. Vue can have multiple instances running at the same time. For example, it might manage your shopping cart widget and the slideshow, with separate, lightweight apps.
  • Vuex is where you can inspect the state managed through Vuex.
  • Events shows all the events emitted.
  • Refresh reloads the devtools panel.

Notice the small = $vm0 text beside a component? It's a handy way to inspect a component using the Console. Pressing the "esc" key shows up the console in the bottom of the devtools, and you can type $vm0 to access the Vue component:

Image

It’s very cool to inspect and interact with components without having to assign them to a global variable in the code.

Filter components

Start typing a component name, and the components tree will filter out the ones that don’t match.

Image

Select a component in the page

Click the **Select component in the page** button.

Image Select component in the page

You can hover over any component in the page with the mouse, click it, and it will be opened in the devtools.

Format components names

You can choose to show components in camelCase or use dashes.

Filter inspected data

On the right panel, you can type any word to filter the properties that don’t match it.

Inspect DOM

Click the Inspect DOM button to be brought to the DevTools Elements inspector, with the DOM element generated by the component:

Image Inspect the DOM

Open in editor

Any user component (not framework-level components) has a button that opens it in your default editor. Very handy.

Setup VS Code to work with Vue

Visual Studio Code is one of the most used code editors in the world right now. Editors have, like many software products, a cycle. Once TextMate was the favorite among developers, then it was Sublime Text, now it’s VS Code.

The cool thing about being popular is that people dedicate a lot of time to building plugins for everything they can imagine.

One such plugin is an awesome tool that can help us Vue.js developers.

Vetur

It’s called Vetur, it’s hugely popular (more than 3 million downloads), and you can find it on the Visual Studio Marketplace.

Image

Installing Vetur

Clicking the Install button will trigger the installation panel in VS Code:

Image

You can also simply open the Extensions in VS Code and search for “vetur”:

Image

What does this extension provide?

Syntax highlighting

Vetur provides syntax highlighting for all your Vue source code files.

Without Vetur, a .vue file will be displayed in this way by VS Code:

Image

with Vetur installed:

Image

VS Code is able to recognize the type of code contained in a file from its extension.

Using Single File Components, you can mix different types of code inside the same file, from CSS to JavaScript to HTML.

VS Code by default cannot recognize this kind of situation, and Vetur provides syntax highlighting for each kind of code you use.

Vetur enables support, among other things, for:

  • HTML
  • CSS
  • JavaScript
  • Pug
  • Haml
  • SCSS
  • PostCSS
  • Sass
  • Stylus
  • TypeScript

Snippets

As with syntax highlighting, since VS Code cannot determine the kind of code contained in a part of a .vue file, it cannot provide the snippets we all love. Snippets are pieces of code we can add to the file, provided by specialized plugins.

Vetur gives VS Code the ability to use your favorite snippets in Single File Components.

IntelliSense

IntelliSense is also enabled by Vetur, for each different language, with autocomplete:

Image

Scaffolding

In addition to enabling custom snippets, Vetur provides its own set of snippets. Each one creates a specific tag (template, script, or style) with its own language:

  • scaffold
  • template with html
  • template with pug
  • script with JavaScript
  • script with TypeScript
  • style with CSS
  • style with CSS (scoped)
  • style with scss
  • style with scss (scoped)
  • style with less
  • style with less (scoped)
  • style with sass
  • style with sass (scoped)
  • style with postcss
  • style with postcss (scoped)
  • style with stylus
  • style with stylus (scoped)

If you type scaffold, you'll get a starter pack for a single-file component:

<template>

</template>

<script>export default {

}</script>

<style>

</style>

The others are specific and create a single block of code.

Note: (scoped) in the above list means that it applies to the current component only.

Emmet

Emmet, the popular HTML/CSS abbreviations engine, is supported by default. You can type one of the Emmet abbreviations, and by pressing tab VS Code will automatically expand it to the HTML equivalent:

Image

Linting and error checking

Vetur integrates with ESLint through the VS Code ESLint plugin.

Image

Image

Code Formatting

Vetur provides automatic support for code formatting to format the whole file upon save — in combination with the "editor.formatOnSave" VS Code setting.

You can choose to disable automatic formatting for some specific languages by setting the vetur.format.defaultFormatter.XXXXX to none in the VS Code settings. To change one of those settings, just start searching for the string, and override what you want in the user settings on the right panel.

Most of the languages supported use Prettier for automatic formatting, a tool that’s becoming an industry standard. It uses your Prettier configuration to determine your preferences.

Introducing Vue Components

Components are single, independent units of an interface. They can have their own state, markup, and style.

How to use components

Vue components can be defined in four main ways. Let’s talk in code.

The first is:

new Vue({  /* options */})

The second is:

Vue.component('component-name', {  /* options */})

The third is by using local components. These are components that are only accessible by a specific component, and not available elsewhere (great for encapsulation).

The fourth is in .vue files, also called Single File Components.

Let’s dive into the first 3 ways in detail.

Using new Vue() or Vue.component() is the standard way to use Vue when you're building an application that is not a Single Page Application (SPA). You use this method, rather, when you’re just using Vue.js in some pages, like in a contact form or in the shopping cart. Or maybe Vue is used in all pages, but the server is rendering the layout, and you serve the HTML to the client, which then loads the Vue application you build.

In an SPA, where it’s Vue that builds the HTML, it’s more common to use Single File Components as they are more convenient.

You instantiate Vue by mounting it on a DOM element. If you have a <div id="app"> tag, you will use:

new Vue({ el: '#app' })

A component initialized with new Vue has no corresponding tag name, so it's usually the main container component.

Other components used in the application are initialized using Vue.component(). Such a component allows you to define a tag — with which you can embed the component multiple times in the application — and specify the output of the component in the template property:

<div id="app">  <user-name name="Flavio"></user-name></div>

Vue.component('user-name', {  props: ['name'],  template: '<p>Hi {{ name }}</p>'})

new Vue({  el: '#app'})

See on JSFiddle

What are we doing? We are initializing a Vue root component on #app, and inside that, we use the Vue component user-name, which abstracts our greeting to the user.

The component accepts a prop, which is an attribute we use to pass data down to child components.

In the Vue.component() call we passed user-name as the first parameter. This gives the component a name. You can write the name in 2 ways here. The first is the one we used, called kebab-case. The second is called PascalCase, which is like camelCase, but with the first letter capitalized:

Vue.component('UserName', {  /* ... */})

Vue automatically creates an alias internally from user-name to UserName, and vice versa, so you can use whatever you like. It's generally best to use UserName in the JavaScript, and user-name in the template.

Local components

Any component created using Vue.component() is globally registered. You don't need to assign it to a variable or pass it around to reuse it in your templates.

You can encapsulate components locally by assigning an object that defines the component object to a variable:

const Sidebar = {  template: '<aside>Sidebar</aside>'}

and then make it available inside another component by using the components property:

new Vue({  el: '#app',  components: {    Sidebar  }})

You can write the component in the same file, but a great way to do this is to use JavaScript modules:

import Sidebar from './Sidebar'

export default {  el: '#app',  components: {    Sidebar  }}

Reusing a component

A child component can be added multiple times. Each separate instance is independent of the others:

<div id="app">  <user-name name="Flavio"></user-name>  <user-name name="Roger"></user-name>  <user-name name="Syd"></user-name></div>

Vue.component('user-name', {  props: ['name'],  template: '<p>Hi {{ name }}</p>'})

new Vue({  el: '#app'})

See on JSFiddle

The building blocks of a component

So far we’ve seen how a component can accept the el, props and template properties.

  • el is only used in root components initialized using new Vue({}), and identifies the DOM element the component will mount on.
  • props lists all the properties that we can pass down to a child component
  • template is where we can set up the component template, which will be responsible for defining the output the component generates.

A component accepts other properties:

  • data the component local state
  • methods: the component methods
  • computed: the computed properties associated with the component
  • watch: the component watchers

Single File Components

A Vue component can be declared in a JavaScript file (.js) like this:

Vue.component('component-name', {  /* options */})

or also:

new Vue({  /* options */})

or it can be specified in a .vue file.

The .vue file is pretty cool because it allows you to define:

  • JavaScript logic
  • HTML code template
  • CSS styling

all in just a single file. As such it got the name of Single File Component.

Here’s an example:

<template>  <p>{{ hello }}</p></template>

<script>export default {  data() {    return {      hello: 'Hello World!'    }  }}</script>

<style scoped>  p {    color: blue;  }</style>

All of this is possible thanks to the use of Webpack. The Vue CLI makes this very easy and supported out of the box. .vuefiles cannot be used without a Webpack setup, and as such, they are not very suited to apps that just use Vue on a page without being a full-blown single-page app (SPA).

Since Single File Components rely on Webpack, we get for free the ability to use modern Web features.

Your CSS can be defined using SCSS or Stylus, the template can be built using Pug, and all you need to do to make this happen is to declare to Vue which language preprocessor you are going to use.

The list of supported preprocessors include

  • TypeScript
  • SCSS
  • Sass
  • Less
  • PostCSS
  • Pug

We can use modern JavaScript (ES6–7–8) regardless of the target browser using the Babel integration, and ES Modules too, so we can use import/export statements.

We can use CSS Modules to scope our CSS.

Speaking of scoping CSS, Single File Components make it absolutely easy to write CSS that won’t leak to other components, by using <style scoped> tags.

If you omit scoped, the CSS you define will be global. But adding the scoped tag, Vue automatically adds a specific class to the component, unique to your app, so the CSS is guaranteed to not leak out to other components.

Maybe your JavaScript is huge because of some logic you need to take care of. What if you want to use a separate file for your JavaScript?

You can use the src attribute to externalize it:

<template>  <p>{{ hello }}</p></template><script src="./hello.js"></script>

This also works for your CSS:

<template>  <p>{{ hello }}</p></template><script src="./hello.js"></script><style src="./hello.css"></style>

Notice how I used

export default {  data() {    return {      hello: 'Hello World!'    }  }}

in the component’s JavaScript to set up the data.

Other common ways you will see are:

export default {  data: function() {    return {      name: 'Flavio'    }  }}

The above is equivalent to what we did before.

Or:

export default {  data: () => {    return {      name: 'Flavio'    }  }}

This is different, because it uses an arrow function. Arrow functions are fine until we need to access a component method. This is an issue if we need to make use of this, and such property is not bound to the component using arrow functions. So it's mandatory to use regular functions rather than arrow functions.

You might also see:

module.exports = {  data: () => {    return {      name: 'Flavio'    }  }}

This is using the CommonJS syntax and it works as well. But I recommend using the ES Modules syntax, as that is a JavaScript standard.

Vue Templates

Vue.js uses a templating language that’s a superset of HTML.

Any HTML is a valid Vue.js template. In addition to that, Vue.js provides two powerful things: interpolation and directives.

This is a valid Vue.js template:

<span>Hello!</span>

This template can be put inside a Vue component declared explicitly:

new Vue({  template: '<span>Hello!</span>'})

or it can be put into a Single File Component:

<template>  <span>Hello!</span></template>

This first example is very basic. The next step is making it output a piece of the component state, for example, a name.

This can be done using interpolation. First, we add some data to our component:

new Vue({  
  data: {    
    name: 'Flavio'  
  },  
  template: '<span>Hello!</span>'
})

and then we can add it to our template using the double brackets syntax:

new Vue({  data: {    name: 'Flavio'  },  template: '<span>Hello {{name}}!</span>'})

One interesting thing here. See how we just used name instead of this.data.name?

This is because Vue.js does some internal binding and lets the template use the property as if it was local. Pretty handy.

In a single file component, that would be:

<template>  <span>Hello {{name}}!</span></template>

<script>export default {  data() {    return {      name: 'Flavio'    }  }}</script>

I used a regular function in my export. Why not an arrow function?

This is because in data we might need to access a method in our component instance, and we can't do that if this is not bound to the component, so we can’t use an arrow function.

Do note that we could use an arrow function, but then I would need to remember to switch to a regular function in case I use this. Better play it safe, I think.

Now, back to the interpolation.

{{ name }} should remind you of Mustache / Handlebars template interpolation, but it's just a visual reminder.

While in those templating engines they are “dumb”, in Vue, you can do much more, and it’s more flexible.

You can use any JavaScript expression inside your interpolations, but you’re limited to just one expression:

{{ name.reverse() }}

{{ name === 'Flavio' ? 'Flavio' : 'stranger' }}

Vue provides access to some global objects inside templates, including Math and Date, so you can use them:

{{ Math.sqrt(16) * Math.random() }}

It’s best to avoid adding complex logic to templates, but the fact that Vue allows it gives us more flexibility, especially when trying things out.

We can first try to put an expression in the template, and then move it to a computed property or method later on.

The value included in any interpolation will be updated upon a change of any of the data properties it relies on.

You can avoid this reactivity by using the v-once directive.

The result is always escaped, so you can’t have HTML in the output.

If you need to have an HTML snippet, you need to use the v-html directive instead.

Styling components using CSS

The simplest option to add CSS to a Vue.js component is to use the style tag, just like in HTML:

<template>  <p style="text-decoration: underline">Hi!</p></template>

<script>export default {  data() {    return {      decoration: 'underline'    }  }}</script>

This is as static as you can get. What if you want underline to be defined in the component data? Here's how you can do it:

<template>  <p :style="{'text-decoration': decoration}">Hi!</p></template>

<script>export default {  data() {    return {      decoration: 'underline'    }  }}</script>

:style is a shorthand for v-bind:style. I'll use this shorthand throughout this tutorial.

Notice how we had to wrap text-decoration in quotes. This is because of the dash, which is not part of a valid JavaScript identifier.

You can avoid the quotes by using a special camelCase syntax that Vue.js enables, and rewriting it to textDecoration:

<template>  <p :style="{textDecoration: decoration}">Hi!</p></template>

Instead of binding an object to style, you can reference a computed property:

<template>  <p :style="styling">Hi!</p></template>

<script>export default {  data() {    return {      textDecoration: 'underline',      textWeight: 'bold'    }  },  computed: {    styling: function() {      return {        textDecoration: this.textDecoration,        textWeight: this.textWeight      }    }  }}</script>

Vue components generate plain HTML, so you can choose to add a class to each element, and add a corresponding CSS selector with properties that style it:

<template>  <p class="underline">Hi!</p></template>

<style>.underline { text-decoration: underline; }</style>

You can use SCSS like this:

<template>  <p class="underline">Hi!</p></template>

<style lang="scss">body {  .underline { text-decoration: underline; }}</style>

You can hard code the class like in the above example. Or you can bind the class to a component property, to make it dynamic, and only apply to that class if the data property is true:

<template>  <p :class="{underline: isUnderlined}">Hi!</p></template>

<script>export default {  data() {    return {      isUnderlined: true    }  }}</script>

<style>.underline { text-decoration: underline; }</style>

Instead of binding an object to class, like we did with <p :class="{text: isText}">Hi!

, you can directly bind a string, and that will reference a data property:

<template>  <p :class="paragraphClass">Hi!</p></template>

<script>export default {  data() {    return {      paragraphClass: 'underline'    }  }}</script>

<style>.underline { text-decoration: underline; }</style>

You can assign multiple classes, either by adding two classes to paragraphClass in this case or by using an array:

<template>  <p :class="[decoration, weight]">Hi!</p></template>

<script>export default {  data() {    return {      decoration: 'underline',      weight: 'weight',    }  }}</script>

<style>.underline { text-decoration: underline; }.weight { font-weight: bold; }</style>

The same can be done using an object inlined in the class binding:

<template>  <p :class="{underline: isUnderlined, weight: isBold}">Hi!</p></template>

<script>export default {  data() {    return {      isUnderlined: true,      isBold: true    }  }}</script>

<style>.underline { text-decoration: underline; }.weight { font-weight: bold; }</style>

And you can combine the two statements:

<template>  <p :class="[decoration, {weight: isBold}]">Hi!</p></template>

<script>export default {  data() {    return {      decoration: 'underline',      isBold: true    }  }}</script>

<style>.underline { text-decoration: underline; }.weight { font-weight: bold; }</style>

You can also use a computed property that returns an object, which works best when you have many CSS classes to add to the same element:

<template>  <p :class="paragraphClasses">Hi!</p></template>

<script>export default {  data() {    return {      isUnderlined: true,      isBold: true    }  },  computed: {    paragraphClasses: function() {      return {        underlined: this.isUnderlined,        bold: this.isBold      }    }  }}</script>

<style>.underlined { text-decoration: underline; }.bold { font-weight: bold; }</style>

Notice that in the computed property you need to reference the component data using this.[propertyName], while in the template data, properties are conveniently put as first-level properties.

Any CSS that’s not hard coded like in the first example is going to be processed by Vue, and Vue does the nice job of automatically prefixing the CSS for us. This allows us to write clean CSS while still targeting older browsers (which still means browsers that Vue supports, so IE9+).

Directives

We saw in Vue.js templates and interpolations how you can embed data in Vue templates.

This section explains the other technique offered by Vue.js in templates: directives.

Directives are basically like HTML attributes which are added inside templates. They all start with v-, to indicate that's a Vue special attribute.

Let’s see each of the Vue directives in detail.

v-text

Instead of using interpolation, you can use the v-text directive. It performs the same job:

<span v-text="name"></span>

v-once

You know how {{ name }} binds to the name property of the component data.

Any time name changes in your component data, Vue is going to update the value represented in the browser.

Unless you use the v-once directive, which is basically like an HTML attribute:

<span v-once>{{ name }}</span>

v-html

When you use interpolation to print a data property, the HTML is escaped. This is a great way that Vue uses to automatically protect from XSS attacks.

There are cases, however, where you want to output HTML and make the browser interpret it. You can use the v-htmldirective:

<span v-html="someHtml"></span>

v-bind

Interpolation only works in the tag content. You can’t use it on attributes.

Attributes must use v-bind:

<a v-bind:href="url">{{ linkText }}</a>

v-bind is so common that there is a shorthand syntax for it:

<a v-bind:href="url">{{ linkText }}</a><a :href="url">{{ linkText }}</a>

Two-way binding using v-model

v-model lets us bind a form input element for example, and makes it change the Vue data property when the user changes the content of the field:

<input v-model="message" placeholder="Enter a message"><p>Message is: {{ message }}</p>

<select v-model="selected">  <option disabled value="">Choose a fruit</option>  <option>Apple</option>  <option>Banana</option>  <option>Strawberry</option></select><span>Fruit chosen: {{ selected }}</span>

Using expressions

You can use any JavaScript expression inside a directive:

<span v-text="'Hi, ' + name + '!'"></span>

<a v-bind:href="'https://' + domain + path">{{ linkText }}</a>

Any variable used in a directive references the corresponding data property.

Conditionals

Inside a directive you can use the ternary operator to perform a conditional check, since that’s an expression:

<span v-text="name == Flavio ? 'Hi Flavio!' : 'Hi' + name + '!'"></span>

There are dedicated directives that allow you to perform more organized conditionals: v-if, v-else and v-else-if.

<p v-if="shouldShowThis">Hey!</p>

shouldShowThis is a boolean value contained in the component's data.

Loops

v-for allows you to render a list of items. Use it in combination with v-bind to set the properties of each item in the list.

You can iterate on a simple array of values:

<template>  <ul>    <li v-for="item in items">{{ item }}</li>  </ul></template>

<script>export default {  data() {    return {      items: ['car', 'bike', 'dog']    }  }}</script>

Or on an array of objects:

<template>  <div>    <!-- using interpolation -->    <ul>      <li v-for="todo in todos">{{ todo.title }}</li>    </ul>    <!-- using v-text -->    <ul>      <li v-for="todo in todos" v-text="todo.title"></li>    </ul>  </div></template>

<script>export default {  data() {    return {      todos: [        { id: 1, title: 'Do something' },        { id: 2, title: 'Do something else' }      ]    }  }}</script>

v-for can give you the index using:

<li v-for="(todo, index) in todos"></li>

Events

v-on allows you to listen to DOM events, and trigger a method when the event happens. Here we listen for a click event:

<template>  <a v-on:click="handleClick">Click me!</a></template>

<script>export default {  methods: {    handleClick: function() {      alert('test')    }  }}</script>

You can pass parameters to any event:

<template>  <a v-on:click="handleClick('test')">Click me!</a></template>

<script>export default {  methods: {    handleClick: function(value) {      alert(value)    }  }}</script>

Small bits of JavaScript (a single expression) can be put directly into the template:

<template>  <a v-on:click="counter = counter + 1">{{counter}}</a></template>

<script>export default {  data: function() {    return {      counter: 0    }  }}</script>

click is just one kind of event. A common event is submit, which you can bind using v-on:submit.

v-on is so common that there is a shorthand syntax for it, @:

<a v-on:click="handleClick">Click me!</a><a @click="handleClick">Click me!</a>

Show or hide

You can choose to only show an element in the DOM if a particular property of the Vue instance evaluates to true, using v-show:

<p v-show="isTrue">Something</p>

The element is still inserted in the DOM, but set to display: none if the condition is not satisfied.

Event directive modifiers

Vue offers some optional event modifiers you can use in association with v-on, which automatically make the event do something without you explicitly coding it in your event handler.

One good example is .prevent, which automatically calls preventDefault() on the event.

In this case, the form does not cause the page to be reloaded, which is the default behavior:

<form v-on:submit.prevent="formSubmitted"></form>

Other modifiers include .stop, .capture, .self, .once, .passive and they are described in detail in the official docs.

Custom directives

The Vue default directives already let you do a lot of work, but you can always add new, custom directives if you want.

Read here if you’re interested in learning more.

Methods

What are Vue.js methods?

A Vue method is a function associated with the Vue instance.

Methods are defined inside the methods property:

new Vue({  methods: {    handleClick: function() {      alert('test')    }  }})

or in the case of Single File Components:

<script>export default {  methods: {    handleClick: function() {      alert('test')    }  }}</script>

Methods are especially useful when you need to perform an action and you attach a v-on directive on an element to handle events. Like this one, which calls handleClick when the element is clicked:

<template>  <a @click="handleClick">Click me!</a></template>

Pass parameters to Vue.js methods

Methods can accept parameters.

In this case, you just pass the parameter in the template:

<template>  <a @click="handleClick('something')">Click me!</a></template>

new Vue({  methods: {    handleClick: function(text) {      alert(text)    }  }})

or in the case of Single File Components:

<script>export default {  methods: {    handleClick: function(text) {      alert(text)    }  }}</script>

How to access data from a method

You can access any of the data properties of the Vue component by using this.propertyName:

<template>  <a @click="handleClick()">Click me!</a></template>

<script>export default {  data() {    return {      name: 'Flavio'    }  },  methods: {    handleClick: function() {      console.log(this.name)    }  }}</script>

We don’t have to use this.data.name, just this.name. Vue does provide a transparent binding for us. Using this.data.name will raise an error.

As you saw before in the events description, methods are closely interlinked to events, because they are used as event handlers. Every time an event occurs, that method is called.

Watchers

A watcher is a special Vue.js feature that allows you to spy on one property of the component state, and run a function when that property value changes.

Here’s an example. We have a component that shows a name, and allows you to change it by clicking a button:

<template>  <p>My name is {{name}}</p>  <button @click="changeName()">Change my name!</button></template>

<script>export default {  data() {    return {      name: 'Flavio'    }  },  methods: {    changeName: function() {      this.name = 'Flavius'    }  }}</script>

When the name changes we want to do something, like print a console log.

We can do so by adding to the watch object a property named as the data property we want to watch over:

<script>export default {  data() {    return {      name: 'Flavio'    }  },  methods: {    changeName: function() {      this.name = 'Flavius'    }  },  watch: {    name: function() {      console.log(this.name)    }  }}</script>

The function assigned to watch.name can optionally accept 2 parameters. The first is the new property value. The second is the old property value:

<script>export default {  /* ... */  watch: {    name: function(newValue, oldValue) {      console.log(newValue, oldValue)    }  }}</script>

Watchers cannot be looked up from a template as you can with computed properties.

Computed Properties

What is a Computed Property

In Vue.js you can output any data value using parentheses:

<template>  <p>{{ count }}</p></template>

<script>export default {  data() {    return {      count: 1    }  }}</script>

This property can host some small computations. For example:

<template>  {{ count * 10 }}</template>

But you’re limited to a single JavaScript expression.

In addition to this technical limitation, you also need to consider that templates should only be concerned with displaying data to the user, not perform logic computations.

To do something more than a single expression, and to have more declarative templates, you use a computed property.

Computed properties are defined in the computed property of the Vue component:

<script>export default {  computed: {

  }}</script>

An example of a computed property

Here’s an example that uses a computed property count to calculate the output.

Notice:

  1. I didn’t have to call {{ count() }}. Vue.js automatically invokes the function
  2. I used a regular function (not an arrow function) to define the count computed property, because I need to be able to access the component instance through this.
<template>  <p>{{ count }}</p></template>

<script>export default {  data() {    return {      items: [1, 2, 3]    }  },  computed: {    count: function() {      return 'The count is ' + this.items.length * 10    }  }}</script>

Computed properties vs. methods

If you already know about Vue methods, you may wonder what’s the difference.

First, methods must be called, not just referenced, so you’d need to do:

<template>  <p>{{ count() }}</p></template>

<script>export default {  data() {    return {      items: [1, 2, 3]    }  },  methods: {    count: function() {      return 'The count is ' + this.items.length * 10    }  }}</script>

But the main difference is that computed properties are cached.

The result of the count computed property is internally cached until the items data property changes.

Important: Computed properties are only updated when a reactive source updates. Regular JavaScript methods are not reactive, so a common example is to use Date.now():

<template>  <p>{{ now }}</p></template>

<script>export default {  computed: {    now: function () {      return Date.now()    }  }}</script>

It will render once, and then it will not be updated even when the component re-renders. It’s just updated on a page refresh, when the Vue component is quit and reinitialized.

In this case, a method is better suited for your needs.

Methods vs. Watchers vs. Computed Properties

Now that you know about methods, watchers and computed properties, you might be wondering when should you use one vs the others.

Here’s a breakdown of this question.

When to use methods

  • To react to some event happening in the DOM
  • To call a function when something happens in your component.
    You can call a method from computed properties or watchers.

When to use computed properties

  • You need to compose new data from existing data sources
  • You have a variable you use in your template that’s built from one or more data properties
  • You want to reduce a complicated, nested property name to a more readable and easy to use one (but update it when the original property changes)
  • You need to reference a value from the template. In this case, creating a computed property is the best thing, because it’s cached.
  • You need to listen to changes of more than one data property

When to use watchers

  • You want to listen when a data property changes, and perform some action
  • You want to listen to a prop value change
  • You only need to listen to one specific property (you can’t watch multiple properties at the same time)
  • You want to watch a data property until it reaches some specific value and then do something

Props: pass data to child components

Props are the way components can accept data from components that include them (parent components).

When a component expects one or more prop, it must define them in its props property:

Vue.component('user-name', {  props: ['name'],  template: '<p>Hi {{ name }}</p>'})

or, in a Vue Single File Component:

<template>  <p>{{ name }}</p></template>

<script>export default {  props: ['name']}</script>

Accept multiple props

You can have multiple props by simply appending them to the array:

Vue.component('user-name', {  props: ['firstName', 'lastName'],  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'})

Set the prop type

You can specify the type of a prop very simply by using an object instead of an array, using the name of the property as the key of each property, and the type as the value:

Vue.component('user-name', {  props: {    firstName: String,    lastName: String  },  template: '<p>Hi {{ firstName }} {{ lastName }}</p>'})

The valid types you can use are:

  • String
  • Number
  • Boolean
  • Array
  • Object
  • Date
  • Function
  • Symbol

When a type mismatches, Vue alerts you (in development mode) in the console with a warning.

Prop types can be more articulated.

You can allow multiple different value types:

props: {  firstName: [String, Number]}

Set a prop to be mandatory

You can require a prop to be mandatory:

props: {  firstName: {    type: String,    required: true  }}

Set the default value of a prop

You can specify a default value:

props: {  firstName: {    type: String,    default: 'Unknown person'  }}

For objects:

props: {  name: {    type: Object,    default: {      firstName: 'Unknown',      lastName: ''    }  }}

default can also be a function that returns an appropriate value, rather than being the actual value.

You can even build a custom validator, which is cool for complex data:

props: {  name: {    validator: name => {      return name === 'Flavio' //only allow "Flavios"    }  }}

Passing props to the component

You pass a prop to a component using the syntax

<ComponentName color="white" />

if what you pass is a static value.

If it’s a data property, you use

<template>  <ComponentName :color=color /></template>

<script>...export default {  //...  data: function() {    return {      color: 'white'    }  },  //...}</script>

You can use a ternary operator inside the prop value to check a truthy condition and pass a value that depends on it:

<template>  <ComponentName :colored="color == 'white' ? true : false" /></template>

<script>...export default {  //...  data: function() {    return {      color: 'white'    }  },  //...}</script>

Handling Events in Vue

What are Vue.js events?

Vue.js allows us to intercept any DOM event by using the v-on directive on an element.

If we want to do something when a click event happens in this element:

<template>  <a>Click me!</a></template>

we add a v-on directive:

<template>  <a v-on:click="handleClick">Click me!</a></template>

Vue also offers a very convenient alternative syntax for this:

<template>  <a @click="handleClick">Click me!</a></template>

You can choose to use the parentheses or not. @click="handleClick" is equivalent to @click="handleClick()".

handleClick is a method attached to the component:

<script>export default {  methods: {    handleClick: function(event) {      console.log(event)    }  }}</script>

What you need to know here is that you can pass parameters from events: @click="handleClick(param)" and they will be received inside the method.

Access the original event object

In many cases, you will want to perform an action on the event object or look up some property in it. How can you access it?

Use the special $event directive:

<template>  <a @click="handleClick($event)">Click me!</a></template>

<script>export default {  methods: {    handleClick: function(event) {      console.log(event)    }  }}</script>

and if you already pass a variable:

<template>  <a @click="handleClick('something', $event)">Click me!</a></template>

<script>export default {  methods: {    handleClick: function(text, event) {      console.log(text)      console.log(event)    }  }}</script>

From there you could call event.preventDefault(), but there's a better way: event modifiers.

Event modifiers

Instead of messing with DOM “things” in your methods, tell Vue to handle things for you:

  • @click.prevent call event.preventDefault()
  • @click.stop call event.stopPropagation()
  • @click.passive makes use of the passive option of addEventListener
  • @click.capture uses event capturing instead of event bubbling
  • @click.self make sure the click event was not bubbled from a child event, but directly happened on that element
  • @click.once the event will only be triggered exactly once

All those options can be combined by appending one modifier after the other.

For more on propagation, bubbling and capturing, see my JavaScript events guide.

Inject content using slots

A component can choose to define its content entirely, like in this case:

Vue.component('user-name', {  props: ['name'],  template: '<p>Hi {{ name }}</p>'})

Or it can also let the parent component inject any kind of content into it, by using slots.

What’s a slot?

You define it by putting <slot>&lt;/slot> in a component template:

Vue.component('user-information', {  template: '<div class="user-information"><slot></slot></div>'})

When using this component, any content added between the opening and closing tag will be added inside the slot placeholder:

<user-information>  <h2>Hi!</h2>  <user-name name="Flavio"></user-information>

If you put any content side the <slot>&lt;/slot> tags, that serves as the default content in case nothing is passed in.

A complicated component layout might require a better way to organize content.

Enter named slots.

With a named slot, you can assign parts of a slot to a specific position in your component template layout, and you use a slot attribute to any tag, to assign content to that slot.

Anything outside any template tag is added to the main slot.

For convenience, I use a page single file component in this example:

<template>  <div>    <main>      <slot></slot>    </main>    <sidebar>      <slot name="sidebar"></slot>    </sidebar>  </div></template>

<page>  <ul slot="sidebar">    <li>Home</li>    <li>Contact</li>  </ul>

  <h2>Page title</h2>  <p>Page content</p></page>

Filters, helpers for templates

Filters are a functionality provided by Vue components that let you apply formatting and transformations to any part of your template dynamic data.

They don’t change a component’s data or anything, but they only affect the output.

Say you are printing a name:

<template>  <p>Hi {{ name }}!</p></template>

<script>export default {  data() {    return {      name: 'Flavio'    }  }}</script>

What if you want to check that name is actually containing a value, and if not print 'there', so that our template will print "Hi there!"?

Enter filters:

<template>  <p>Hi {{ name | fallback }}!</p></template>

<script>export default {  data() {    return {      name: 'Flavio'    }  },  filters: {    fallback: function(name) {      return name ? name : 'there'    }  }}</script>

Notice the syntax to apply a filter, which is | filterName. If you're familiar with Unix, that's the Unix pipe operator, which is used to pass the output of an operation as an input to the next one.

The filters property of the component is an object. A single filter is a function that accepts a value and returns another value.

The returned value is the one that’s actually printed in the Vue.js template.

The filter, of course, has access to the component data and methods.

What’s a good use case for filters?

  • transforming a string, for example, capitalizing or making it lowercase
  • formatting a price

Above you saw a simple example of a filter: {{ name | fallback }}.

Filters can be chained, by repeating the pipe syntax:

{{ name | fallback | capitalize }}

This first applies the fallback filter, then the capitalize filter (which we didn't define, but try making one!).

Advanced filters can also accept parameters, using the normal function parameters syntax:

<template>  <p>Hello {{ name | prepend('Dr.') }}</p></template>

<script>export default {  data() {    return {      name: 'House'    }  },  filters: {    prepend: (name, prefix) => {      return `${prefix} ${name}`    }  }}</script>

If you pass parameters to a filter, the first one passed to the filter function is always the item in the template interpolation (name in this case), followed by the explicit parameters you passed.

You can use multiple parameters by separating them using a comma.

Notice I used an arrow function. We avoid arrow functions in methods and computed properties, generally, because they almost always reference this to access the component data. But in this case, the filter does not need to access this but receives all the data it needs through the parameters, and we can safely use the simpler arrow function syntax.

This package has a lot of pre-made filters for you to use directly in templates, which include capitalize, uppercase, lowercase, placeholder, truncate, currency, pluralize and more.

Communication among components

Components in Vue can communicate in various ways.

Using Props

The first way is by using props.

Parents “pass down” data by adding arguments to the component declaration:

<template>  <div>    <Car color="green" />  </div></template>

<script>import Car from './components/Car'

export default {  name: 'App',  components: {    Car  }}</script>

Props are one-way: from parent to child. Any time the parent changes the prop, the new value is sent to the child and re-rendered.

The reverse is not true, and you should never mutate a prop inside the child component.

Using Events to communicate from children to parent

Events allow you to communicate from the children up to the parent:

<script>export default {  name: 'Car',  methods: {    handleClick: function() {      this.$emit('clickedSomething')    }  }}</script>

The parent can intercept this using the v-on directive when including the component in its template:

<template>  <div>    <Car v-on:clickedSomething="handleClickInParent" />    <!-- or -->    <Car @clickedSomething="handleClickInParent" />  </div></template>

<script>export default {  name: 'App',  methods: {    handleClickInParent: function() {      //...    }  }}</script>

You can pass parameters of course:

<script>export default {  name: 'Car',  methods: {    handleClick: function() {      this.$emit('clickedSomething', param1, param2)    }  }}</script>

and retrieve them from the parent:

<template>  <div>    <Car v-on:clickedSomething="handleClickInParent" />    <!-- or -->    <Car @clickedSomething="handleClickInParent" />  </div></template>

<script>export default {  name: 'App',  methods: {    handleClickInParent: function(param1, param2) {      //...    }  }}</script>

Using an Event Bus to communicate between any components

Using events you’re not limited to child-parent relationships. You can use the so-called Event Bus.

Above we used this.$emit to emit an event on the component instance.

What we can do instead is to emit the event on a more generally accessible component.

this.$root, the root component, is commonly used for this.

You can also create a Vue component dedicated to this job, and import it where you need.

<script>export default {  name: 'Car',  methods: {    handleClick: function() {      this.$root.$emit('clickedSomething')    }  }}</script>

Any other component can listen for this event. You can do so in the mounted callback:

<script>export default {  name: 'App',  mounted() {    this.$root.$on('clickedSomething', () => {      //...    })  }}</script>

This is what Vue provides out of the box.

When you outgrow this, you can look into Vuex or other 3rd part libraries.

Manage state using Vuex

Vuex is the official state management library for Vue.js.

Its job is to share data across the components of your application.

Components in Vue.js out of the box can communicate using

  • props, to pass state down to child components from a parent
  • events, to change the state of a parent component from a child, or using the root component as an event bus

Sometimes things get more complex than what these simple options allow.

In this case, a good option is to centralize the state in a single store. This is what Vuex does.

Why should you use Vuex?

Vuex is not the only state management option you can use in Vue (you can use Redux too), but its main advantage is that it’s official, and its integration with Vue.js is what makes it shine.

With React you have the trouble of having to choose one of the many libraries available, as the ecosystem is huge and has no actual standard. Lately Redux was the most popular choice, with MobX following up in terms of popularity. With Vue I’d go as far as to say that you won’t need to look around for anything other than Vuex, especially when starting out.

Vuex borrowed many of its ideas from the React ecosystem, as this is the Flux pattern popularized by Redux.

If you know Flux or Redux already, Vuex will be very familiar. If you don’t, no problem — I’ll explain every concept from the ground up.

Components in a Vue application can have their own state. For example, an input box will store the data entered into it locally. This is perfectly fine, and components can have local state even when using Vuex.

You know that you need something like Vuex when you start doing a lot of work to pass a piece of state around.

In this case, Vuex provides a central repository store for the state, and you mutate the state by asking the store to do that.

Every component that depends on a particular piece of the state will access it using a getter on the store, which makes sure it’s updated as soon as that thing changes.

Using Vuex will introduce some complexity into the application, as things need to be set up in a certain way to work correctly. But if this helps solve the unorganized props passing and event system that might grow into a spaghetti mess if too complicated, then it’s a good choice.

Let’s start

In this example, I’m starting from a Vue CLI application. Vuex can be used also by directly loading it into a script tag. But, since Vuex is more in tune with bigger applications, it’s much more likely you will use it on a more structured application, like the ones you can start up quickly with the Vue CLI.

The examples I use will be put CodeSandbox, which is a great service that has a Vue CLI sample ready to go. I recommend using it to play around.

Image

Once you’re there, click the Add dependency button, enter “vuex” and click it.

Now Vuex will be listed in the project dependencies.

To install Vuex locally you can simply run npm install vuex or yarn add vuex inside the project folder.

Create the Vuex store

Now we are ready to create our Vuex store.

This file can be put anywhere. It’s generally suggested to put it in the src/store/store.js file, so we'll do that.

In this file we initialize Vuex and tell Vue to use it:

import Vue from 'vue'import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({})

Image

We export a Vuex store object, which we create using the Vuex.Store() API.

A use case for the store

Now that we have a skeleton in place, let’s come up with an idea for a good use case for Vuex, so I can introduce its concepts.

For example, I have two sibling components, one with an input field, and one that prints that input field content.

When the input field is changed, I want to also change the content in that second component. Very simple, but this will do the job for us.

Introducing the new components we need

I delete the HelloWorld component and add a Form component, and a Display component.

<template>  <div>    <label for="flavor">Favorite ice cream flavor?</label>    <input name="flavor">  </div></template>

<template>  <div>    <p>You chose ???</p>  </div></template>

Adding those components to the app

We add them to the App.vue code instead of the HelloWorld component:

<template>  <div id="app">    <Form/>    <Display/>  </div></template>

<script>import Form from './components/Form'import Display from './components/Display'

export default {  name: 'App',  components: {    Form,    Display  }}</script>

Add the state to the store

So with this in place, we go back to the store.js file. We add a property to the store called state, which is an object, that contains the flavor property. That's an empty string initially.

import Vue from 'vue'import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({  state: {    flavor: ''  }})

We’ll update it when the user types into the input field.

Add a mutation

The state cannot be manipulated except by using mutations. We set up one mutation which will be used inside the Form component to notify the store that the state should change.

import Vue from 'vue'import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({  state: {    flavor: ''  },  mutations: {    change(state, flavor) {      state.flavor = flavor    }  }})

Add a getter to reference a state property

With that set, we need to add a way to look at the state. We do so using getters. We set up a getter for the flavorproperty:

import Vue from 'vue'import Vuex from 'vuex'

Vue.use(Vuex)

export const store = new Vuex.Store({  state: {    flavor: ''  },  mutations: {    change(state, flavor) {      state.flavor = flavor    }  },  getters: {    flavor: state => state.flavor  }})

Notice how getters is an object. flavor is a property of this object, which accepts the state as the parameter, and returns the flavor property of the state.

Adding the Vuex store to the app

Now the store is ready to be used. We go back to our application code, and in the main.js file, we need to import the state and make it available in our Vue app.

We add

import { store } from './store/store'

and we add it to the Vue application:

new Vue({  el: '#app',  store,  components: { App },  template: '<App/>'})

Once we add this, since this is the main Vue component, the store variable inside every Vue component will point to the Vuex store.

Update the state on a user action using commit

Let’s update the state when the user types something.

We do so by using the store.commit() API.

But first, let’s create a method that is invoked when the input content changes. We use @input rather than @changebecause the latter is only triggered when the focus is moved away from the input box, while @input is called on every keypress.

<template>  <div>    <label for="flavor">Favorite ice cream flavor?</label>    <input @input="changed" name="flavor">  </div></template>

<script>export default {  methods: {    changed: function(event) {      alert(event.target.value)    }  }}</script>

Now that we have the value of the flavor, we use the Vuex API:

<script>export default {  methods: {    changed: function(event) {      this.$store.commit('change', event.target.value)    }  }}</script>

See how we reference the store using this.$store? This is thanks to the inclusion of the store object in the main Vue component initialization.

The commit() method accepts a mutation name (we used change in the Vuex store) and a payload, which will be passed to the mutation as the second parameter of its callback function.

Use the getter to print the state value

Now we need to reference the getter of this value in the Display template, by using $store.getters.flavor. this can be removed because we're in the template, and this is implicit.

<template>  <div>    <p>You chose {{ $store.getters.flavor }}</p>  </div></template>

The full, working source code is available here.

There are still many concepts missing in this puzzle:

  • actions
  • modules
  • helpers
  • plugins

But now you have the basics to go and read about them in the official docs.

Handle URLs using Vue Router

In a JavaScript web application, a router is the part that syncs the currently displayed view with the browser address bar content.

In other words, it’s the part that makes the URL change when you click something in the page, and helps to show the correct view when you hit a specific URL.

Traditionally, the Web is built around URLs. When you hit a certain URL, a specific page is displayed.

With the introduction of applications that run inside the browser and change what the user sees, many applications broke this interaction, and you had to manually update the URL with the browser’s History API.

You need a router when you need to sync URLs to views in your app. It’s a very common need, and all the major modern frameworks now allow you to manage routing.

The Vue Router library is the way to go for Vue.js applications. Vue does not enforce the use of this library. You can use whatever generic routing library you want, or also create your own History API integration, but the benefit of using Vue Router is that it’s official.

This means it’s maintained by the same people who maintain Vue, so you get a more consistent integration in the framework, and the guarantee that it’s always going to be compatible in the future, no matter what.

Installation

Vue Router is available via npm with the package named vue-router.

If you use Vue via a script tag, you can include Vue Router using

<script src="https://unpkg.com/vue-router"></script>

UNPKG is a very handy tool that makes every npm package available in the browser with a simple link.

If you use the Vue CLI, install it using:

npm install vue-router

Once you install vue-router and make it available either using a script tag or via Vue CLI, you can now import it in your app.

You import it after vue, and you call Vue.use(VueRouter) to install it inside the app:

import Vue from 'vue'import VueRouter from 'vue-router'

Vue.use(VueRouter)

After you call Vue.use() passing the router object, in any component of the app you have access to these objects:

  • this.$router is the router object
  • this.$route is the current route object

The router object

The router object, accessed using this.$router from any component when the Vue Router is installed in the root Vue component, offers many nice features.

We can make the app navigate to a new route using

  • this.$router.push()
  • this.$router.replace()
  • this.$router.go()

which resemble the pushState, replaceState and go methods of the History API.

  • push() is used to go to a new route, adding a new item to the browser history
  • replace() is the same, except it does not push a new state to the history

Usage samples:

this.$router.push('about') //named route, see laterthis.$router.push({ path: 'about' })this.$router.push({ path: 'post', query: { post_slug: 'hello-world' } }) //using query parameters (post?post_slug=hello-world)this.$router.replace({ path: 'about' })

go() goes back and forth, accepting a number that can be positive or negative to go back in the history:

this.$router.go(-1) //go back 1 stepthis.$router.go(1) //go forward 1 step

Defining the routes

I’m using a Vue Single File Component in this example.

In the template I use a nav tag that has three router-link components, which have the labels Home, Login, and About. A URL is assigned through the to attribute.

The router-view component is where the Vue Router will put the content that matches the current URL.

<template>  <div id="app">    <nav>      <router-link to="/">Home</router-link>      <router-link to="/login">Login</router-link>      <router-link to="/about">About</router-link>    </nav>    <router-view></router-view>  </div></template>

A router-link component renders an a tag by default (you can change that). Every time the route changes, either by clicking a link or by changing the URL, a router-link-active class is added to the element that refers to the active route, allowing you to style it.

In the JavaScript part, we first include and install the router, then we define three route components.

We pass them to the initialization of the router object, and we pass this object to the Vue root instance.

Here’s the code:

<script>import Vue from 'vue'import VueRouter from 'vue-router'

Vue.use(Router)

const Home  = {  template: '<div>Home</div>'}

const Login = {  template: '<div>Login</div>'}

const About = {  template: '<div>About</div>'}

const router = new VueRouter({  routes: [    { path: '/', component: Home },    { path: '/login', component: Login },    { path: '/about', component: About }  ]})

new Vue({  router}).$mount('#app')</script>

Usually, in a Vue app, you instantiate and mount the root app using:

new Vue({  render: h => h(App)}).$mount('#app')

When using the Vue Router, you don’t pass a render property but instead, you use router.

The syntax used in the above example:

new Vue({  router}).$mount('#app')

is shorthand for:

new Vue({  router: router}).$mount('#app')

See in the example, we pass a routes array to the VueRouter constructor. Each route in this array has a path and component params.

If you pass a name param too, you have a named route.

Using named routes to pass parameters to the router push and replace methods

Remember how we used the Router object to push a new state before?

this.$router.push({ path: 'about' })

With a named route we can pass parameters to the new route:

this.$router.push({ name: 'post', params: { post_slug: 'hello-world' } })

The same goes for replace():

this.$router.replace({ name: 'post', params: { post_slug: 'hello-world' } })

The application will render the route component that matches the URL passed to the link.

The new route component that handles the URL is instantiated and its guards called, and the old route component will be destroyed.

Route guards

Since we mentioned guards, let’s introduce them.

You can think of them as life cycle hooks or middleware. Those are functions called at specific times during the execution of the application. You can jump in and alter the execution of a route, redirecting or simply canceling the request.

You can have global guards by adding a callback to the beforeEach() and afterEach() property of the router.

  • beforeEach() is called before the navigation is confirmed
  • beforeResolve() is called when beforeEach() is executed and all the components beforeRouterEnter and beforeRouteUpdate guards are called, but before the navigation is confirmed. The final check.
  • afterEach() is called after the navigation is confirmed

What does “the navigation is confirmed” mean? We’ll see it in a second. In the meantime think of it as “the app can go to that route”.

The usage is:

this.$router.beforeEach((to, from, next) => {  // ...})

this.$router.afterEach((to, from) => {  // ...})

to and from represent the route objects that we go to and from.

beforeEach has an additional parameter next which if we call with false as the parameter, will block the navigation and cause it to be unconfirmed.

Like in Node middleware, if you're familiar, next() should always be called, otherwise execution will get stuck.

Single route components also have guards:

  • beforeRouteEnter(from, to, next) is called before the current route is confirmed
  • beforeRouteUpdate(from, to, next) is called when the route changes but the component that manages it is still the same (with dynamic routing, see next)
  • beforeRouteLeave(from, to, next) is called when we move away from here

We mentioned navigation. To determine if the navigation to a route is confirmed, Vue Router performs some checks:

  • it calls beforeRouteLeave guard in the current component(s)
  • it calls the router beforeEach() guard
  • it calls the beforeRouteUpdate() in any component that needs to be reused, if any exist
  • it calls the beforeEnter() guard on the route object (I didn't mention it but you can look here)
  • it calls the beforeRouterEnter() in the component that we should enter into
  • it calls the router beforeResolve() guard
  • if all was fine, the navigation is confirmed!
  • it calls the router afterEach() guard

You can use the route-specific guards (beforeRouteEnter and beforeRouteUpdate in case of dynamic routing) as life cycle hooks, so you can start data fetching requests for example.

Dynamic routing

The example above shows a different view based on the URL, handling the /, /login and /about routes.

A very common need is to handle dynamic routes, like having all posts under /post/, each with the slug name:

  • /post/first
  • /post/another-post
  • /post/hello-world

You can achieve this using a dynamic segment.

Those were static segments:

const router = new VueRouter({  routes: [    { path: '/', component: Home },    { path: '/login', component: Login },    { path: '/about', component: About }  ]})

We add in a dynamic segment to handle blog posts:

const router = new VueRouter({  routes: [    { path: '/', component: Home },    { path: '/post/:post_slug', component: Post },    { path: '/login', component: Login },    { path: '/about', component: About }  ]})

Notice the :post_slug syntax. This means that you can use any string, and that will be mapped to the post_slugplaceholder.

You’re not limited to this kind of syntax. Vue relies on this library to parse dynamic routes, and you can go wild with Regular Expressions.

Now inside the Post route component we can reference the route using $route, and the post slug using $route.params.post_slug:

const Post = {  template: '<div>Post: {{ $route.params.post_slug }}</div>'}

We can use this parameter to load the contents from the back-end.

You can have as many dynamic segments as you want, in the same URL:

/post/:author/:post_slug

Remember before when we talked about what happens when a user navigates to a new route?

In the case of dynamic routes, what happens is a little different.

For Vue to be more efficient, instead of destroying the current route component and re-instantiating it, it reuses the current instance.

When this happens, Vue calls the beforeRouteUpdate life cycle event.

There you can perform any operation you need:

const Post = {  template: '<div>Post: {{ $route.params.post_slug }}</div>'  beforeRouteUpdate(to, from, next) {    console.log(`Updating slug from ${from} to ${to}`)    next() //make sure you always call next()  }}

Using props

In the examples, I used $route.params.* to access the route data. A component should not be so tightly coupled with the router, and instead, we can use props:

const Post = {  props: ['post_slug'],  template: '<div>Post: {{ post_slug }}</div>'}

const router = new VueRouter({  routes: [    { path: '/post/:post_slug', component: Post, props: true }  ]})

Notice the props: true passed to the route object to enable this functionality.

Nested routes

Before I mentioned that you can have as many dynamic segments as you want, in the same URL, like:

/post/:author/:post_slug

So, say we have an Author component taking care of the first dynamic segment:

<template>  <div id="app">    <router-view></router-view>  </div></template>

<script>import Vue from 'vue'import VueRouter from 'vue-router'

Vue.use(Router)

const Author  = {  template: '<div>Author: {{ $route.params.author}}</div>'}

const router = new VueRouter({  routes: [    { path: '/post/:author', component: Author }  ]})

new Vue({  router}).$mount('#app')</script>

We can insert a second router-view component instance inside the Author template:

const Author  = {  template: '<div>Author: {{ $route.params.author}}<router-view></router-view></div>'}

We add the Post component:

const Post = {  template: '<div>Post: {{ $route.params.post_slug }}</div>'}

Then we’ll inject the inner dynamic route in the VueRouter configuration:

const router = new VueRouter({  routes: [{    path: '/post/:author',    component: Author,    children: [      path: ':post_slug',      component: Post    ]  }]})

Thank you for reading!

Get this post PDF/ePub/Kindle ebook at vuehandbook.com

]]>