How to build a Single Page Application using Vue.js, Vuex, Vuetify, and Firebase

How to install Vue and build an SPA using Vuetify and Vue Router

Meal Prep application

Do you want to learn how to use Vue.js? Want to create a realistic website using Vue.js? In this tutorial, I will teach you how to create a meal delivery website using Vue, Vuex, Vue Router, Vuetify, and Firebase.

This tutorial is presented as a series of articles that will take you from installing Vue for the first time to creating a fully functional meal delivery website. The header image above shows the website that we will be creating.

This tutorial is broken down into a four-part series. Here are the links to each part of the series:

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

This tutorial is suitable for everyone regardless of your skill level. I only assume that you have a knowledge of ES6.

Let’s get started.

Installing Vue

Creating a new application using Vue.js is done through their command line…