DigitalCore.co.nz

# 03 - Build the Login and Register routes

Watch the YouTube video:

https://www.youtube.com/watch?v=nKpMGyqz4OE

# TL;DR

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.

# Prerequisites

The following technologies are needed for this dev guide:

# Citations

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 OK button).
  • Right-click the folder called "pages".
  • Select New File from 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/login to test the Login route.
  • Navigate to http://localhost:3000/register to test the Register route.

# Review

In this dev guide, we:

  • introduced the routing mechanism, and
  • created the Login and Register routes.

# Next

In the next dev guide, we are going to install a few specialist tools.