Create a Password Generator App with Vue 3 and JavaScript

Vue 3 is the latest version of the easy to use Vue JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a password generator app with Vue 3 and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create password-generator

and select all the default options to create the project.

Create the Password Generator

To create the password generator app, we write:

<template>
  <form @submit.prevent="generatePassword">
    <div>
      <label>length</label>
      <input v-model.number="length" />
    </div>
    <button type="submit">generate password</button>
  </form>
  <div>{{ password }}</div>
</template>

<script>
const string = "abcdefghijklmnopqrstuvwxyz";
const numeric = "0123456789";
const punctuation = "!@#$%^&*()_+~`|}{[]:;?><,./-=";

export default {
  name: "App",
  data() {
    return {
      length: 10,
      password: "",
    };
  },
  computed: {
    formValid() {
      const { length } = this;
      return +length > 0;
    },
  },
  methods: {
    generatePassword() {
      const { length, formValid } = this;
      if (!formValid) {
        return;
      }
      let character = "";
      let password = "";
      while (password.length < length) {
        const entity1 = Math.ceil(
          string.length * Math.random() * Math.random()
        );
        const entity2 = Math.ceil(
          numeric.length * Math.random() * Math.random()
        );
        const entity3 = Math.ceil(
          punctuation.length * Math.random() * Math.random()
        );
        let hold = string.charAt(entity1);
        hold = password.length % 2 === 0 ? hold.toUpperCase() : hold;
        character += hold;
        character += numeric.charAt(entity2);
        character += punctuation.charAt(entity3);
        password = character;
      }
      password = password
        .split("")
        .sort(() => {
          return 0.5 - Math.random();
        })
        .join("");
      this.password = password.substr(0, length);
    },
  },
};
</script>

We have a form with the @submit directive to listen to the submit event.

prevent lets us do client-side submission instead of server-side.

In the form, we have the input field that binds to the length reactive property with v-model .

The number modifier lets us convert the bound value automatically to a number.

Below that, we have the generate password button, which has type set to submit to trigger the submit event.

And below the form, we have the password displayed.

In the script tag, we have the string , numeric , and punctuation variables that we get characters from to generate the password.

The data method returns the reactive properties.

The formValid reactive property checks whether length is bigger than 0 so that we can generate a password with a valid length.

In the generatePassword method, we get the length and formValid properties and use them.

We check formValid first before generating the password.

Then we add a while loop to generate a password with the given length.

We get an alphabet, number, and punctuation randomly with Math.random .

Then we append the characters picked by concatenating them to character .

And then we shuffle the characters with the sort method.

0.5 — Math.random() ensures that we return a random number in the callback so we shuffle the characters in password .

Then finally, we assign the password cut to the given length to the this.password reactive property.

Conclusion

We can create a password generator easily with Vue 3 and JavaScript.