Toggle to hide or show password in Vuetify

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

    label="Enter password"
    :append-icon="value ? 'visibility' : 'visibility_off'"
    @click:append="() => (value = !value)"
    :type="value ? 'password' : 'text'"

  export default {
    data() {
      return {
        value: String

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

  1. 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
  2. Show or hide password when user clicks on the appended icon

The end-result -

If you click on the icon to show password -

comments powered by Disqus