Creating a Simple Notes Application Using Vue 3 and JavaScript
Written on
Chapter 1: Introduction to Vue 3
Vue 3 is the most recent iteration of the user-friendly Vue JavaScript framework, designed for developing front-end applications. This guide will walk you through the process of building a notes application using Vue 3 and JavaScript.
Creating the Project
To begin, we can set up our Vue project using the Vue CLI. You can install it by running:
npm install -g @vue/cli
or with Yarn:
yarn global add @vue/cli
Next, create the project with:
vue create notes-app
Choose the default options to set up the project. Additionally, we will require the uuid package to generate unique identifiers for our notes. Install it using:
npm install uuid
Building the Notes Application
To construct the notes application, utilize the following code:
<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>
In this setup, the first form allows users to add new notes. The @submit.prevent directive prevents the default server-side submission behavior. The v-model directive binds the input fields to the reactive properties, making them accessible within the component. The search form below enables users to filter notes by keywords.
The notes are displayed using the v-for directive, which renders the title and description of each note. We also ensure that each note has a unique key through its ID for efficient tracking by Vue 3.
The component's data method initializes the reactive properties, and the computed property filteredNotes provides a way to filter notes based on the search keyword. The add method adds a new note to the notes array, while the remove method allows for deleting notes by their index.
Chapter 2: Video Tutorials
Explore how to build a notes application using Vue.js and Nhost with GraphQL and Tailwind CSS. This video tutorial provides step-by-step instructions.
Learn how to create a simple notes application with Vue.js 3 in this detailed guide. Perfect for beginners wanting to get started with Vue.