Create a Notes 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 notes 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 notes-app

and select all the default options to create the project.

We also need the uuid package to let us generate unique IDs for our notes.

To do this, we run:

npm i uuid

Create the Notes App

To create the notes app, we write:

<template>
  <form @submit.prevent="add">
    <h1>add note</h1>
    <div>
      <label>title</label>
      <input v-model="title" />
    </div>
    <div>
      <label>description</label>
      <input v-model="description" />
    </div>
    <button type="submit">add</button>
  </form>

  <form>
    <h1>search</h1>
    <div>
      <label>keyword</label>
      <input v-model="keyword" />
    </div>
  </form>

  <div v-for="(note, index) of filteredNotes" :key="note.id">
    <h2>{{ note.title }}</h2>
    <p>{{ note.description }}</p>
    <button type="button" @click="remove(index)">remove</button>
  </div>
</template>

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

export default {
  name: "App",
  data() {
    return {
      title: "",
      description: "",
      keyword: "",
      notes: [],
    };
  },
  computed: {
    filteredNotes() {
      const { keyword } = this;
      if (!keyword) {
        return this.notes;
      }
      return this.notes.filter(({ title, description }) => {
        return title.includes(keyword) || description.includes(keyword);
      });
    },
  },
  methods: {
    add() {
      const { title, description } = this;
      this.notes.push({
        id: uuidv4,
        title,
        description,
      });
      this.title = "";
      this.description = "";
    },
    remove(index) {
      this.notes.splice(index, 1);
    },
  },
};
</script>

The first form lets us add a note entry.

We have the submit event listener added with the @submit directive.

prevent lets us prevent server-side submission.

The inputs have the v-model directive to let us bind to the reactive properties so we can use them in the component object.

Then we have the submit button with type set to submit to let us submit the form when we click it.

Below that, we have another form to let us search for notes.

We have an input that’s bound to the keyword reactive property with v-model .

And below that, we render the filterNotes into HTML with the v-for directive.

We render the title and description properties.

Also, we need the key prop set to the id property so that it receives a unique ID.

This way, Vue 3 can keep track of the items properly.

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

Also, we have the filteredNotes computed property to get the notes filtered by keyword .

Then we add the add method to put the title and description into an object with the id and call this.notes.push to push that into the this.notes array.

The remove method lets us remove an entry by index with splice .

Conclusion

We can create a notes app easily with Vue 3 and JavaScript.