How to build a Multi-user Notebook Application with Vue3, Vuex and Firebase: Vue Router

Part 2: Using Vue Router. Free Code Provided.

This is my journey to develop a multi-user notebook application. This article is how and why I use vue-router.

Before start, I want to talk about the structure of Vue components. In fact, that’s nothing Vue-specific: any component-based technology, such as React or Angular, work the same way. A basic structure has a components folder, along with a main.js entry file and an App.vue component.

src/ 
    main.js 
    App.vue
    components/

What is Vue Router?

When we have an MPA (Multi-Page Application) and need to link to another page with Vanilla JavaScript. This is really annoying to have several Html files to link with several Vue SFC files:

<a href="contact.html">
Contact Page
</a>

Using vue-router can solve this problem resulting in lots of pages with an Html file. If you really don’t have enough time to learn vue-router using Nuxt.js instead would be a great idea. Nuxt.js is good at automatic routes even the dynamic pages are easy to use.

Import Vue Router

As we are using Vue CLI we can add Vue Router as a plugin. It will also overwrite your App.vue so make sure to back up the file before running the following command inside your project:

vue add router 

After install vue-router, It will generate a router folder include an index.js file and a views folder where we will put our page SFC files.

We need to edit the entry file main.js . Import the router folder and use it in our app.

Set the router

In the router folder, we have an index.js file to set up our routers. We import all pages files. We create the router and put the details of the router in it. This allows us to change the path in here for every router.

Then we can use <router-link> to link to a different page or <router-view> to render a page. Also, we can do some dynamic pages.

 <router-link to=”/Home”>Home</router-link>

After setting up the route try to make your own navigation bar!

The next Article is about Login, Signin and ForgotPassword:

Part 3: Firebase Auth Implementation

Others articles:

Part 1: Installing Vue CLI

Part 4: Using Firebase to add profile

Part 5: Using TipTap

Get the Code

you can get the finished code in my GitHub account. Please help me out and star the repo when you get the code.

Hope you have a lovely coding journey. Find me on IG! I am a freelance theatre maker.

Thanks for supporting me!

Reference

Getting Started | Vue Router