Toggling Password Visibility using VueJS

Toggling password visibility gives the user an option to click on the button to change the hidden password into text format so that he can make sure he has typed in the correct characters at the time of sign-in or sign-up.

Using VueJS, it’s very easy to implement password visibility. For this example demonstration, I have included Bootstrap and Font-Awesome libraries in the project.

Consider the following HTML snippet, for the single password field.

<div class="input-group mb-3">
    <input class="form-control" placeholder="Password">
    <div class="input-group-append">
      <span class="input-group-text"><i class="fa fa-eye-slash" aria-hidden="true"></i></span>

This contains an input of type password and along with that eye-slash icon by default (which denotes that the password is not visible by default)

Livewire Component Library

password visibility toggle VueJS

Host Laravel Application on DigitalOcean

Use coupon 5balloons on this Cloudways Affiliate URL to get special discount.

Toggle Password Visibility 

Now, let’s tweak the code to include VueJS so that when the user clicks on the icon the password is visible and it also changes the icon.

<div class="input-group mb-3">
    <input v-bind:type="[showPassword ? 'text' : 'password']" class="form-control" placeholder="Password">
    <div class="input-group-append">
      <span class="input-group-text" @click="showPassword = !showPassword">
            <i class="fa" :class="[showPassword ? 'fa-eye' : 'fa-eye-slash']" aria-hidden="true"></i>
var app = new Vue({
    el: '#app',
    data: {
        showPassword: false,

We have defined a data property named showPassword which is false by default.


How it Works? 

    • When the user clicks on the icon, we toggle the boolean value showPassword @click="showPassword = !showPassword"
    • We change the type of input field to text if showPassword is set to true.
    • We also change the class binding of icon to fa-eye if showPassword is set to true.



That’s about it.

Join my VueJS Newsletter

As I advance in my Journey of learning VueJS, I will be working on different exercises and challenges. Subscribe to receive the latest tutorials (every week) directly in your inbox.

    I won't send you spam. Unsubscribe at any time.

    Powered By ConvertKit

    Site Footer