Create an Issue Tracker 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.