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.
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.
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.
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.
@extends('layouts.app') @section('content') <register></register> @endsection
@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="email@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">© 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
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
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
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
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
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