# 03 - Build the Login and Register routes
Watch the YouTube video:
Today I will demonstrate how to build routes that are compatible with the Nuxt framework.
# Executive summary
Routing is a mechanism that is used to navigate a system of resources. This mechanism commonly manifests as 1) file-based navigation between HTML pages, 2) requests for resources such as images and scripts, and 3) matching end points - URL request paths - to functions that interact with a database (https://api.digitalcore.co.nz/users/1). Luckily for us, building routes in Nuxt is a very simple process.
The following technologies are needed for this dev guide:
- VS Code,
- the framework that was built in the last dev guide, and
- a browser.
The are no references cited for this dev guide.
# Build the Login and Register routes
Follow these steps to build the Login and Register routes:
- Open VS Code.
- Open the "login-code" project folder (File > Open Folder...[CTRL+K CTRL+O] > Navigate to the project folder, click on the folder to select it, then click the green
- Right-click the folder called "pages".
New Filefrom the popup menu.
- Name the file "login.vue".
- Add the following to the "login.vue" file:
<template> <div> <h1>Login</h1> </div> </template>
- Save the file.
Repeat the same process again with the following changes:
- Name the next file "register.vue".
- Put the word "Register" between the H1 tags.
Now test the routes:
- Open the terminal (CTRL + ~).
- Run the server in development mode:
$ npm run dev
Once the server has started:
- Open a browser.
- Navigate to
http://localhost:3000/loginto test the Login route.
- Navigate to
http://localhost:3000/registerto test the Register route.
In this dev guide, we:
- introduced the routing mechanism, and
- created the Login and Register routes.
In the next dev guide, we are going to install a few specialist tools.