Building a SPA using Vue-Router

Nowadays, more developers adopt the Single Page Application (SPA) architecture for their web applications or static site. This article will talk about the various merits and demerits of SPAs and build one using the Vue JS Library.

What is a SPA?

According to the MDN Web Docs, single Page Applications (SPA) allow users to use websites without loading new pages during navigation. SPAs utilise Client-Side Routing instead of Server Side Routing, which websites traditionally use.

In Server-Side routing, when a user visits a new page, the browser sends a request to the server, asking for the required files to load the page. The server grants the request, and the browser downloads the views and scripts for that page. This process repeats every time the user wants to navigate to other pages within the website.

In Client-Side Routing, when the user visits the website for the first time, the server provides the browser with an index.html file which comes with a bundled script of the entire website. All the necessary HTML, CSS and JavaScript codes are retrieved with a single page load. All the required resources are dynamically retrieved and added to the page. In Vue, when navigation happens, Vue uses Vue-router to check for the differences in the DOM and renders them on the page.

Pros & Cons

Let’s have a look on the pros and cons of the SPA approach

Pros

1. It is highly reactive
2. Less load on the server
3. Better User Experience
4. Better client-server interaction, the dividing of front-end’s and back-end’s concerns

Cons

1. SEO is challenging
2. JavaScript is strictly required
3. Performance on client side

Alright, enough chit-chat on SPA. Let’s get to the exciting stuff, building SPAs using Vue and Vue-router.

Tools

There are different ways of adding vue-router to a vue project. In this article, we will be using a tool called vue-cli.

Vue-cli

For a new project, vue-CLI would work perfectly. With Vue-cli, we can start our project with one of Vue's many open-source templates, and we can also choose to create our template.

First, we’ll need to install it using

npm install -g vue-cli

Let’s create a new application called spa-app using

vue create spa-app

Then you will be asked to select a preset, use the arrow keys to navigate to Manually select features and press enter

Afterwards, you will be asked to select features needed for your project, use the arrow keys to navigate to Router, press space to select and press enter to proceed.

You will then be asked to choose a version of Vue.js to start the project. We will be using Vue 3, so press enter to proceed.

We won’t use history mode in this article, but just press enter to proceed with it.

We will go with the default options for the linter, so press enter to proceed.

Press enter to select lint on save and proceed.

We will choose the default here also. Press enter to proceed.

If you choose to save these settings as a preset for future purposes, you can by pressing enter and following the steps, but I will not be doing that, so I will type n and press enter.

Vue-Cli will then help us create our project using the required features selected, Initialize a local git repository and install a CLI plugin.

Once Vue-Cli is done creating the application, change the directory to the developed app and run the app by typing

cd spa-app
npm run serve

You should see a page like this on your localhost server.

If you click on the about link, it will take you to the about page without a browser reload.

How does this work? Let us find out. On your code editor, navigate to the src > main.js file. This file is the webpack entry point. The App.vue component, the parent component for all other components, is imported there.

In the src > App.vue file, you will notice a couple of components.

The router-link component serves as an anchor tag to help navigate the user.

The router-view component is a functional component that renders the matched component for the given path.

We know how vue displays links on the page, but configuring Vue-router to our settings is still challenging. Let’s dive deeper into the code.

If you navigate to src > router directory, we will find an index.js file.

The file contains all the logic for telling vue what component to render to the screen with a particular path. If you look closely, we are importing the createRouter and createWebHistory hooks from vue.

The createRouter hook creates a Router instance that the Vue app can use. You pass in all the routes for the website in an array.

The createWebHistory hook is also imported because we chose to use histories with the router during installation. This hook creates an HTML5 history.

If you want to add a new page, you can create a new view in the src > views directory, import it into the src > router > index.js file, add the route as an object in the array, and state the component in the component key-value pair.

Afterwards, you can use the router-link component in any other component to link to that component. Since we are adding a contact view component, you can add a link to your contact page in your App.vue file.

Congratulations, you have created a Single Page Application using Vue-Cli and Vue-router.

Conclusion

In this article, we learnt about SPAs, the difference between Server-Side and Client-Side routing, and the Pros and Cons of SPAs. We also learned how to build a SPA with Vue CLI and Vue-router and configure routing with the vue-router. Thanks for reading through if you made it this far, I hope you learned something valuable today.