Category: Vue

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.

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 an address book 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 address-book

and select all the default options to create the project.

We also need to install the uuid package so that we can generate unique IDs for each grade entry.

To install it, we run:

npm i uuid

Create the Address Book

To create the address book app, we write:

<template>
  <form @submit.prevent="addContact">
    <div>
      <label>name</label>
      <input v-model="contact.name" />
    </div>
    <div>
      <label>address</label>
      <input v-model="contact.address" />
    </div>
    <div>
      <label>phone</label>
      <input v-model="contact.phone" />
    </div>
    <button type="submit">add</button>
  </form>
  <div v-for="(contact, index) of contacts" :key="contact.id">
    <p>name: {{ contact.name }}</p>
    <p>address: {{ contact.address }}</p>
    <p>phone: {{ contact.phone }}</p>
    <button type="button" @click="deleteContact(index)">delete </button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";

export default {
  name: "App",
  data() {
    return {
      contact: {
        name: "",
        address: "",
        phone: "",
      },
      contacts: [],
    };
  },
  computed: {
    formValid() {
      const { name, address, phone } = this.contact;
      return (
        name &&
        address &&
        /^[(]{0,1}[0-9]{3}[)]{0,1}[-\s.]{0,1}[0-9]{3}[-\s.]{0,1}[0-9]{4}$/.test(
          phone
        )
      );
    },
  },
  methods: {
    addContact() {
      if (!this.formValid) {
        return;
      }
      const { name, address, phone } = this.contact;
      this.contacts.push({ id: uuidv4(), name, address, phone });
    },
    deleteContact(index) {
      this.contacts.splice(index, 1);
    },
  },
};
</script>

We have a form with the @submit directive to listen for submit events which is triggered by the add button.

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

Inside it, we have the input fields to let us add the name, address, and phone number of the contact.

Below that, we have the divs rendered with the v-for directive to render the content of the contacts reactive property array.

The key prop is required and it should be a unique ID so that Vue 3 can discern the entries properly.

Inside it, we render the name, address, and phone properties of the contact .

And we add a delete button so that the contact can be deleted.

In the script tag, we return the reactive properties in the data method.

The formValid computed properties checks whether name , address , and phone are valid.

We check the phone number with a regex.

We allow parentheses for the prefix, dashes in between the segments, and 10 digits in total.

The test method lets us check if a string matches the given regex object.

In the addContact method, we check formValid to see if all the values are valid.

If it is, then we call push to add an entry into the contacts array.

uuidv4 generates the unique ID for the entry.

deleteContact deletes the contact with splice and the index .

Conclusion

We can add an address book easily 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 an issue tracker 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 issue-tracker

and select all the default options to create the project.

We also need to install the uuid package so that we can generate unique IDs for each grade entry.

To install it, we run:

npm i uuid

Create the Issue Tracker

To create the issue tracker, we write:

<template>
  <form @submit.prevent="addIssue">
    <div>
      <label>description</label>
      <input v-model="issue.description" />
    </div>

    <div>
      <label>priority</label>
      <select v-model="issue.priority">
        <option>low</option>
        <option>medium</option>
        <option>high</option>
      </select>
    </div>

    <div>
      <label>assignee</label>
      <input v-model="issue.assignee" />
    </div>
    <button type="submit">add issue</button>
  </form>
  <div v-for="(issue, index) of issues" :key="issue.id">
    <p>description: {{ issue.description }}</p>
    <p>priority: {{ issue.priority }}</p>
    <p>assignee: {{ issue.assignee }}</p>
    <button type="button" @click="deleteIssue(index)">delete issue</button>
  </div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";

export default {
  name: "App",
  data() {
    return {
      issue: {
        description: "",
        priority: "low",
        assignee: "",
      },
      issues: [],
    };
  },
  computed: {
    formValid() {
      const { description, priority, assignee } = this.issue;
      return description && priority && assignee;
    },
  },
  methods: {
    addIssue() {
      if (!this.formValid) {
        return;
      }
      const { description, priority, assignee } = this.issue;
      this.issues.push({ id: uuidv4(), description, priority, assignee });
    },
    deleteIssue(index) {
      this.issues.splice(index, 1);
    },
  },
};
</script>

We have a form that has the @submit directive to listen for submit events, which are emitted when we click on the button with type submit .

The prevent modifier lets us do client-side form submissions instead of server-side.

In the form, we have inputs for entering the description and the assignee of the task.

And we have a select dropdown for selecting the priority.

We bind all those values to the properties of the issue reactive property with v-model .

Below the fields, we have the add issue button which submits the form.

And below that, we have the divs to render the issues we added.

The key prop is set to the id property which is a unique ID for each issues entry.

We display the properties and show a delete issue button to let users delete the issue.

In the component object, we have the data method that returns reactive properties.

The formValid computed property checks whether each field is filled in.

The addIssue method uses the formValid computed property to check for validity of the fields.

If they’re all valid, which means formValid is false , then we call this.issues.push to push the issue object into the array.

The deleteIssue method takes an index and calls this.issues.splice to delete the entry with the given index .

Conclusion

We can create a simple issue tracker easily 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 percentage calculator 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 percentage-calculator

and select all the default options to create the project.

Create the Percentage Calculator

To create the percentage calculator, we write:

<template>
  <form @submit.prevent="calculate">
    <div>
      <label>points given</label>
      <input v-model.number="pointsGiven" />
    </div>

    <div>
      <label>points possible</label>
      <input v-model.number="pointsPossible" />
    </div>
    <button type="submit">calculate</button>
  </form>
  <div>percentage:{{ percentage }}</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      pointsGiven: 0,
      pointsPossible: 0,
      percentage: 0,
    };
  },
  computed: {
    formValid() {
      const { pointsGiven, pointsPossible } = this;
      return +pointsGiven >= 0 && +pointsPossible > 0;
    },
  },
  methods: {
    calculate() {
      if (!this.formValid) {
        return;
      }
      const { pointsGiven, pointsPossible } = this;
      this.percentage = (pointsGiven / pointsPossible) * 100;
    },
  },
};
</script>

We have a form that has the @submit directive to let us listen to the submit event emitted when clicking the button with type submit .

The prevent modifier prevents server-side submission and lets us do client-side form submission.

Then we have the inputs for entering the points given and points possible values.

We bind the inputted values to reactive properties with the v-model directive.

The number modifier converts the inputted values to numbers automatically.

Then we have the calculate button which we click to submit the form.

Below that, we have the div to display the calculated percentage .

In the component object, we have the data method to return an object with the reactive properties and their initial values.

In the formValid computed property, we check if pointsGiven and pointsPossible are valid values.

pointsPossible should be bigger than 0 since we can’t divide by 0.

Then below that, we have the calculate method, which checks if the formValid property is true .

If it’s true , then we calculate the percentage.

Conclusion

We can create a percentage calculator easily 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 grade calculator 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 grade-calculator

and select all the default options to create the project.

We also need to install the uuid package so that we can generate unique IDs for each grade entry.

To install it, we run:

npm i uuid

Create the Grade Calculator

To create the grade calculator, we write:

<template>
  <form @submit.prevent="calculate">
    <div v-for="(grade, index) of grades" :key="grade.id">
      <label>grade</label>
      <input v-model.number="grade.value" />
      <button type="button" @click="deleteGrade(index)">delete grade</button>
    </div>
    <button type="button" @click="addGrade">add grade</button>
    <button type="submit">calculate average</button>
  </form>
  <div>Your average grade is {{ average }}</div>
</template>

<script>
import { v4 as uuidv4 } from "uuid";
export default {
  name: "App",
  data() {
    return {
      grades: [{ id: uuidv4(), value: 0 }],
      average: 0,
    };
  },
  computed: {
    formValid() {
      return this.grades.every(({ value }) => !isNaN(+value));
    },
  },
  methods: {
    addGrade() {
      this.grades.push({ id: uuidv4(), value: 0 });
    },
    deleteGrade(index) {
      this.grades.splice(index, 1);
    },
    calculate() {
      if (!this.formValid) {
        return;
      }
      this.average =
        this.grades.map(({ value }) => value).reduce((a, b) => a + b, 0) /
        this.grades.length;
    },
  },
};
</script>

We have a form with the @submit directive to let us handle form submissions with the calculate method.

The prevent modifier lets us do client-side submissions instead of server-side.

Inside it, we render divs with v-for for each grade entry.

Inside each div, we have an input field that binds to the grade.value property with v-model .

The number modifier converts the input value to a nmber.

The delete grade button is set to type button so that it doesn’t submit the form when we click it.

It calls deleteGrade to delete the grade entry at the given index .

Below that, we have the add grade button to add a grade by calling addGrade when we click it.

And below that, we have the button to submit the form.

The div is used to display the average grade.

In the script tag, we have the data method that returns the grades array and average .

They’re both reactive properties.

The formValid computed property checks if every grades entry’s value property is a number with the isNaN function.

Below that, we have the methods we call.

The addGrade method calls push to add a new entry into the this.grades array.

uuidv4 returns a UUID string so we can add an ID to the entry.

We need the unique ID so that Vue 3 can discern the entries that are rendered.

We set that as the key prop’s value to make it a unique identifier for the row.

The deleteGrade method calls splice to remove an item with the index and 1 to remove the entry with the given index .

The calculate method calls map to return an array with the value s of each grades entry.

Then it calls reduce to add the numbers together. The 0 in the 2nd argument is the initial value.

And then the total is divided by this.grades.length to get the average.

Conclusion

We can create a grade calculator easily with Vue 3 and JavaScript.