Vue User Registration Form Code Snippet

Hello my friends, welcome back to my blog. Today in this blog post, I am going to show you, Vue User Registration Form Code Snippet.

Vuejs3 came and if you are new then you must check below link::
Vuejs

Friends now I proceed onwards and here is the code snippet for Vue User Registration Form Code Snippet and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh vuejs(Vue 3) setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can skip this first step if you already have vuejs fresh setup:

npm install -g @vue/cli

vue create vueform

cd vueform

npm install bootstrap --save

npm i jquery --save

npm run serve //http://localhost:8080/

2. Finally guys we need to add below code into our src/App.vue file to get final output on web browser:

<template>
<div class="container">
  
  <div class="card bg-light">
  <article class="card-body mx-auto" style="max-width: 400px;">
      <h4 class="card-title mt-3 text-center">Create Account</h4>
      <p class="text-center">Get started with your free account</p>
      <p>
          <a href="#" class="btn btn-block btn-twitter"> <i class="fab fa-twitter"></i>   Login via Twitter</a>
          <a href="#" class="btn btn-block btn-facebook"> <i class="fab fa-facebook-f"></i>   Login via facebook</a>
      </p>
      <p class="divider-text">
          <span class="bg-light">OR</span>
      </p>
      <form>
      <div class="form-group input-group">
          <div class="input-group-prepend">
              <span class="input-group-text"> <i class="fa fa-user"></i> </span>
           </div>
          <input name="" class="form-control" placeholder="Full name" type="text">
      </div> <!-- form-group// -->
      <div class="form-group input-group">
          <div class="input-group-prepend">
              <span class="input-group-text"> <i class="fa fa-envelope"></i> </span>
           </div>
          <input name="" class="form-control" placeholder="Email address" type="email">
      </div> <!-- form-group// -->
      <div class="form-group input-group">
          <div class="input-group-prepend">
              <span class="input-group-text"> <i class="fa fa-phone"></i> </span>
          </div>
          <select class="custom-select" style="max-width: 120px;">
              <option selected="">+91</option>
              <option value="1">+001</option>
              <option value="2">+020</option>
              <option value="3">+011</option>
          </select>
          <input name="" class="form-control" placeholder="Phone number" type="text">
      </div> <!-- form-group// -->
      <div class="form-group input-group">
          <div class="input-group-prepend">
              <span class="input-group-text"> <i class="fa fa-building"></i> </span>
          </div>
          <select class="form-control">
              <option selected=""> Select job type</option>
              <option>Web Developer</option>
              <option>Full Stack Developer</option>
              <option>Mean Stack</option>
          </select>
      </div> <!-- form-group end.// -->
      <div class="form-group input-group">
          <div class="input-group-prepend">
              <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
          </div>
          <input class="form-control" placeholder="Create password" type="password">
      </div> <!-- form-group// -->
      <div class="form-group input-group">
          <div class="input-group-prepend">
              <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
          </div>
          <input class="form-control" placeholder="Repeat password" type="password">
      </div> <!-- form-group// -->                                      
      <div class="form-group">
          <button type="button" class="btn btn-primary btn-block"> Create Account  </button>
      </div> <!-- form-group// -->      
      <p class="text-center">Have an account? <a href="#">Log In</a> </p>                                                                 
  </form>
  </article>
  </div> <!-- card.// -->
  
  </div> 
  <!--container end.//-->
  

</template>
<script>
//Bootstrap

import 'bootstrap/dist/css/bootstrap.min.css';

import './App.css';
 

export default {

  
}
</script>

3. Now guys we need to add below code into our src/App.css file:

.divider-text {
    position: relative;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
.divider-text span {
    padding: 7px;
    font-size: 12px;
    position: relative;   
    z-index: 2;
}
.divider-text:after {
    content: "";
    position: absolute;
    width: 100%;
    border-bottom: 1px solid #ddd;
    top: 55%;
    left: 0;
    z-index: 1;
}

.btn-facebook {
    background-color: #405D9D;
    color: #fff;
}
.btn-twitter {
    background-color: #42AEEC;
    color: #fff;
}

4. Now guys we need to add below code into our public/index.html file:

...
<head>
...
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
    
</head>

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. I will come with more demo which will helpful to all.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks