Full-Stack Web Development with Vue.js and Node

Building Authentication with passport.js Chapter 6

Creating a register view page

Let's add a view page for the users to sign up. For that, we will need to create a form that

takes the name, email, and password parameters. Create a file called Register.vue

inside src/components:

<template>

<v-form v-model="valid" ref="form" lazy-validation>

<v-text-field

label="Name"

v-model="name"

required

></v-text-field>

<v-text-field

label="Email"

v-model="email"

:rules="emailRules"

required

></v-text-field>

<v-text-field

label="Password"

v-model="password"

required

></v-text-field>

<v-text-field

name="input-7-1"

label="Confirm Password"

v-model="confirm_password"

></v-text-field>

<v-btn

@click="submit"

:disabled="!valid"

>

submit

</v-btn>

<v-btn @click="clear">clear</v-btn>

</v-form>

</template>

The vue file is a simple template file that contains the form components. The next step is to

add a route for that file.