To start our component, we will use the Vue project with Vue-CLI that we used in the 'Creating a 404 error page' recipe, or we can start a new one.
To start a new one, open Terminal (macOS or Linux) or Command Prompt/PowerShell (Windows) and execute the following command:
> vue create http-project
Choose the manual features and add Router as a required feature, as indicated in the 'How to do it...' section in the 'Creating a simple route' recipe.
Our recipe will be divided into three parts:
- Creating the authentication middleware
- Adding the metadata and the middleware to the router
- Attaching the middleware to vue-router and creating the login page
Let's get started.