How to build an SPA using Vue.js, Vuex, Vuetify, and Firebase: using Vue Router

Part 2: learn how to use Vue Router with your SPA

Meal Prep application

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

This is part two 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. I am using Vuetify for styling the app. I will also take advantage of the many UI components that it offers.

After getting everything installed, we styled the home page of our application.

Using Vue Router

Vue router provides the navigation for our application. When you click on the SIGN IN button, it will redirect you to the page to login. When you click the MENU button, it will redirect you to the page that shows the available meal plans.