Toggle to hide or show password in Vuetify

You can do the following in a password box to hide or show passwords on click.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


<template>
  <v-text-field
    name="password"
    :value="myPass"
    label="Enter password"
    :append-icon="value ? 'visibility' : 'visibility_off'"
    @click:append="() => (value = !value)"
    :type="value ? 'password' : 'text'"
  ></v-text-field>
</template>

<script>
  export default {
    data() {
      return {
        value: String,
      };
    },
  };
</script>

Password is captured in a v-text-field element and we are doing a couple of things here -

Use ‘show’ or ‘hide’ icons based on whether password is shown in plain text or as a hidden item (append-icon). We use type to be password or text to achieve this
Show or hide password when user clicks on the appended icon

The end-result -

If you click on the icon to show password -

Toggle to hide or show password in Vuetify

See Also