Show And Hide Password In Laravel Vue - FreeCodeBlog

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.

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