Show And Hide Password In Laravel Vue - FreeCodeBlog

Last updated: Dec 15, 2021

make show and hide password in laravel vue using laravel ui package. Sometimes, we may require to show hide password input field so, user can see what he written in password in login form or any other form.

 

Show And Hide Password In Laravel Vue
Show And Hide Password In Laravel Vue


Laravel Ui To Make Show & Hide Password.

To make show and hide password in laravel I will use laravel UI version 3 authentication first party package for laravel 8. you can read install laravel ui package in any kind of laravel version tutorial.

 

Now you visit login page.

 

127.0.0.1:8000/login

 

After installing, Running, Compiling the laravel/ui you need to connect database in your laravel project to make show and hide password in laravel vue.

 

Now you may make show and hide password in login form or any other form.

 

So let's create two vue file into components folder.

 

Login.vue

 

Register.vue

 

After created two vue file you need to register in app.js file.

 

vue.component('register', require('./components/Register.vue').default);
vue.component('login', require('./components/Login.vue').default);

 

Next you need to change register and login page.

 

register.blade.php:

 

@extends('layouts.app')
@section('content')
<register></register>
@endsection

 

login.blade.php:

 

@extends('layouts.app')
@section('content')
<login></login>
@endsection

 

Before changing register and login vue file you need to install vform.

 

npm install vform

 

Configure vform into app.js file.

 

import Form from 'vform';
vue.use(Form);

 

Now change login.vue file.

 

 
  <form>
    <img class="mb-4" src="/docs/5.0/assets/brand/bootstrap-logo.svg" alt="" width="72" height="57">
    <h1 class="h3 mb-3 fw-normal">Please sign in</h1>

    <div class="form-floating">
      <input type="email" class="form-control" id="floatingInput" placeholder="name@example.com">
      <label for="floatingInput">Email address</label>
    </div>
    <div class="form-floating">
      <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">Password</label>
    </div>

    <div class="checkbox mb-3">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2017–2021</p>
  </form>

 

Now you can use this process to register form or any other form.

 

Okay so this is for today. See you again next tutorials. Thanks

Post Tags
Post Writer
masum7323
Masum Biswas (@masum7323)

My name is Masum Biswas. I'm a full stack developer. I live in Bangladesh and I love to write tutorials and tools that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, MySQL, VueJS, Tailwind CSS and Bootstrap from the early stage.

Follow Me On
Related Posts
Laravel Eloquent One To One Relationship Example Tutorial

One to One model relationship is very simple and basic. you have to make sure that one of the table has a key that references the ID of the other t... Read More

Deploy Laravel Project On Digital Ocean Full Explanation

Laravel is one of the best framework that builds web application in PHP. It ensures a pleasing journey for the developer with satisfactory function... Read More

Make Login With Google In Laravel For User Registration Using Laravel Socialite

Read this post carefully if you want to make login with google in laravel for user registration using laravel first party package (laravel socialit... Read More

How To Install Any Kind Of Laravel Version

Welcome to laravel. Want to install laravel version on your environment (windows 10, cpanel)? Yes!. Okay After reading this tutorial you can easily... Read More

Implement Moment Js In Laravel With Vue

Want to use human readable date time in laravel vue? Yes! you need to implement moment js in laravel in laravel to use human readable date time. Yo... Read More