Sign Up Page in VueJS

This project aims to create a Sign Up Page using Vue.js and Tailwind CSS. The page allows users to sign up by providing their name, email, and password and confirming the password. It provides a simple and intuitive interface for the users to input their information and complete the sign-up process.

Prerequisites:

Approach

Initialize a Vue.js instance to handle the sign-up form functionality.
Design the sign-up form using the Tailwind CSS classes for the styling.
Implement data properties to the store user input for the name, email, password, and confirm password.
Create a method to handle form submission performing the validation checks for the empty fields and password matching.
Display alerts to notify users of the any errors in the form submission or successful sign-up.
Link the Vue.js instance to the HTML form elements using the v-model directives for the two-way data binding.
Test the application to the ensure proper functionality and user experience.

Example: This example shows the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0">
    <title>Sign Up Page</title>
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
    <style>
        body {
            background-color: #f3f4f6;
        }

        .container {
            max-width: 400px;
            border: 2px solid rgb(0, 0, 0);
            border-radius: 8px;
            padding: 20px;
        }

        .form-input {
            transition: border-color 0.3s ease;
            border: 1px solid #ccc;
            border-radius: 4px;
            padding: 8px;
            width: 100%;
            margin-bottom: 10px;
        }

        .form-input:focus {
            border-color: #4f46e5;
            outline: none;
        }
    </style>
</head>

<body class="flex items-center justify-center h-screen">
    <div id="app" class="container bg-white p-8">
        <h2 class="text-3xl font-bold text-center mb-6">Sign Up</h2>
        <form>
            <div class="mb-4">
                <input type="text" v-model="name"
                       placeholder="Name"
                       class="form-input">
            </div>
            <div class="mb-4">
                <input type="email" v-model="email" 
                       placeholder="Email" 
                       class="form-input">
            </div>
            <div class="mb-4">
                <input type="password" v-model="password"
                       placeholder="Password" 
                       class="form-input">
            </div>
            <div class="mb-6">
                <input type="password" 
                       v-model="confirmPassword" 
                       placeholder="Confirm Password" 
                       class="form-input">
            </div>
            <button @click.prevent="signUp"
                class="w-full bg-blue-500 hover:bg-blue-600 
                       text-white font-semibold py-2
                       rounded-md focus:outline-none">Sign
                Up</button>
        </form>
        <p class="mt-4 text-sm text-center
                  text-gray-600">Already have 
                                   an account? <a href="#"
                class="text-blue-500 hover:underline">Sign in here</a></p>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js">
      </script>
    <script>
        new Vue({
            el: '#app',
            data: {
                name: '',
                email: '',
                password: '',
                confirmPassword: ''
            },
            methods: {
                signUp() {
                    if (this.name.trim() === "" || this.email.trim() === "" ||
                        this.password.trim() === "" || this.confirmPassword.trim() === "") {
                        alert("Please fill in all fields.");
                        return;
                    }
                    if (this.password !== this.confirmPassword) {
                        alert("Passwords do not match.");
                        return;
                    }
                    alert("Sign up successful!");
                }
            }
        });
    </script>
</body>

</html>

Output:

Article Tags :

JavaScript

Project

Web Technologies

Vue.JS