Image

touring-vue-router

Introduction

We’ll be building a production-level app using Vue 3

2 min read
Last update: December 19, 2021

In the Touring Vue Router course, we’ll be exploring most of the functionality found in the Vue Router library, which allows us to create advanced navigation through our Single Page Applications using Vue.

Most of this configuration will be done inside our /router/index.js file, where we define our application’s routes. More specifically which URL paths link up to which components and where they’re defined on our screen.

To take this course I’m assuming you have basic Vue knowledge and are familiar with the concepts taught in our Intro to Vue 3 course and Real World Vue 3 course. Especially what is taught in the Vue Router Essentials lesson, which teaches how to setup Vue Router and the very basics of using it.

On our tour we’ll be building out the events application you may have started building with us in our Real World Vue 3 course. We’ll build in pagination, proper error handling when a page doesn’t exist or the network is down, a progress bar to compensate when a page is slow to load (probably because of a slow API call), and a flash message to give our users a message that appears at the top of any page.

We’ll also give an overview of much of the Vue Router syntax you’ll need to build out big Vue applications.