Category: Vue 3 Projects

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 tic tac toe game 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 tic-tac-toe

and select all the default options to create the project.

Create the Tic Tac Toe

To create the tic tac toe game, we write:

<template>
  <div v-if="xWins || oWins">
    <div v-if="xWins">x wins</div>
    <div v-if="oWins">o wins</div>
    <button @click="restart">restart</button>
  </div>
  <form v-else>
    <div v-for="i in 3" :key="i">
      <span v-for="j in 3" :key="j">
        <input v-model.trim="board[i - 1][j - 1]" style="width: 20px" />
      </span>
    </div>
  </form>
</template>

<script>
const board = [[], [], []];

export default {
  name: "App",
  data() {
    return {
      board,
    };
  },
  computed: {
    xWins() {
      return this.isWinner("x");
    },
    oWins() {
      return this.isWinner("o");
    },
  },
  methods: {
    restart() {
      this.board = [[], [], []];
    },
    isWinner(player) {
      const { board } = this;
      return (
        (board[0][0] === player &&
          board[0][1] === player &&
          board[0][2] === player) ||
        (board[1][0] === player &&
          board[1][1] === player &&
          board[1][2] === player) ||
        (board[2][0] === player &&
          board[2][1] === player &&
          board[2][2] === player) ||
        (board[0][0] === player &&
          board[1][0] === player &&
          board[2][0] === player) ||
        (board[0][1] === player &&
          board[1][1] === player &&
          board[2][1] === player) ||
        (board[0][2] === player &&
          board[1][2] === player &&
          board[2][2] === player) ||
        (board[0][0] === player &&
          board[1][1] === player &&
          board[2][2] === player) ||
        (board[0][2] === player &&
          board[1][1] === player &&
          board[2][0] === player)
      );
    },
  },
};
</script>

In the template, we have a div that displays the outcome of the game if there is one.

If either x or o wins, we display who wins.

Also, we add a restart button so that the game can be restarted.

Otherwise, we display the game board.

We use v-for to render 3 inputs.

And we render inputs to let players enter the value.

We bind the inputted value to the board nested array entry with v-model .

The trim modifier lets us trim the leading and trailing whitespace of the inputted value.

In the script tag, we have the board array, which we use as the initial value of the board reactive property.

Then we have the xWins and oWins computed properties to determine who wins.

The winner is determined by the isWinner method, which checks if any player has their marker on the board either diagonally, vertically, or horizontally.

Conclusion

We can create a tic tac toe game 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 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 pomodoro-timer

and select all the default options to create the project.

Create the Pomodoro Timer

To create the Pomodoro timer app, we write:

<template>
  <h1>Pomodoro Timer</h1>
  <button @click="start">start</button>
  <div>{{ secondsLeft }} seconds left</div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      secondsLeft: 25 * 60,
      timer: undefined,
    };
  },
  methods: {
    start() {
      this.timer = setInterval(() => {
        this.secondsLeft--;
        if (this.secondsLeft === 0) {
          clearInterval(this.timer);
        }
      }, 1000);
    },
  },
  beforeUnmount() {
    clearInterval(this.timer);
  },
};
</script>

In the template, we have the start button to let us start the timer when we click it.

The div displays the number of seconds left before the time is up.

In the data method, we return reactive properties with the secondsLeft and the timer reactive properties.

The start method calls setInterval to start the timer.

We decrement the secondsLeft reactive property’s value until secondsLeft is 0.

If it’s 0, then we call clearInterval to clear the timer.

1000 is the interval to wait before the callback runs again.

In the beforeUnmount hook, we call clearInterval to clear the timer when we unmount the component.

When we click start, we should see the seconds count down on the page.

Conclusion

We can create a Pomodoro timer 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 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.