/ Vue.js

Show / hide password input values with Vue.js

Nowadays it's common to have the possibility to toggle the visibility of a password field on websites, applications, login screens etc. Implementing such a functionality with Vue.js is really simple and straigth forward (of course, this can also be achieved with pure JavaScript. But hey, JS frameworks are trendy and fancy, so why not implement it with one?)

show/hide password in a Vue.js application

Implementation with raw JS

The basic idea behind showing / hiding the value of a password field is, that you have a clickable element, which switches the type of the input field. That's it.

If the type of the input is password, then switch it to text to make the value of the field visible. If the type of the input field is text, then switch it to password, to masquerade the value again. To demonstrate the simplicity, let's first build this functionality with raw JS:
show/hide password with raw JS
show/hide password with raw JS View on CodePen

What happens here?

  • lines 1-2 declare our input field and the button, which triggers the switchVisibility function when being clicked
  • line 5 gets our password input field so we can take according actions on it later
  • lines 7-10 is our implementation to handle the button click. We check, if the attribute type of our password field is 'password'. If it is, we change the attribute to 'text', so our input value will be visible. If the type isn't 'password', we can assume it is 'text' and therefor change the type to 'password' to masquerade it's value again

Implementation with Vue.js

If you are familiar with the basics of Vue.js, this piece of code won't scare you that much. Anyways, I will explain it below step by step. This code produces exactly the same visual output as the raw JS implementation above.
show/hide password with Vue.js View on CodePen

What happens here?

  • lines 1-4 define the global structure with our input and button elements
  • line 2 defines the input field, instructs Vue.js to keep the type attribute up to date with the value of the instance's passwordFieldType property. Additionally, it keeps the instance's password property up to date with the input value and updates the input's value, if the instance's property changes
  • line 3 again defines our button and instructs Vue to call the instance method switchVisibility if it has been clicked
  • lines 7-8 initiate our Vue instance and mount it onto the DOM element with the id app
  • lines 9-12 define the instance's data property with the password and passwordFieldType properties
  • line 14-16 is again the same named function as in the raw JS example. It switches the value of the passwordFieldType property of our Vue instance instead of manipulating the DOM directly. When updating this property, Vue automatically updates the type attribute of the input field, because we have told it to do so above

Bonus - Vue.js Login Template

These two examples are pretty small and concise. No CSS is involved at all. If you want to play around with a slightly more sophisticated example, I've pushed a repository to GitHub, which containes the example from the animated gif at the beginning of this post. The live demo can also be explored online.

If you have any further questions, aspects you are unsure with or found anything, that is incorrect in this article, don't hesitate to leave a comment below or reach out to me on Twitter: @ivansieder

Ivan Sieder

Ivan Sieder

23 years young, CTO & full-stack developer @ https://SiMedia.com // Tech enthusiast // Hacking around in JavaScript, Node.js, Docker, Vue.js, Go

Read More