Creating a simple notes app using VueJS
It is a simple notes taking or ToDo application which allows you to add as well as delete the items. You can create an task you have to do in future and delete it once you have complete it.
Example: The below VueJS code will help you in creating the simple notes taking app.
<!-- App.vue -->
<template>
<div id="app">
<h2 style="text-align: center;">
A Simple Notes App using VueJS
</h2>
<div class="input-container">
<input v-model="newNote"
placeholder="Type your note" />
<button @click="addNote">
Add Note
</button>
</div>
<NoteTaking v-for="note in notes" :key="note.id"
:note="note" @delete="deleteNote" />
</div>
</template>
<script>
import NoteTaking from './NoteTaking.vue';
export default {
components: {
NoteTaking,
},
data() {
return {
newNote: '',
notes: [],
nextNoteId: 1,
};
},
methods: {
addNote() {
if (this.newNote.trim() === '') return;
this.notes.push({
id: this.nextNoteId++,
text: this.newNote
});
this.newNote = '';
},
deleteNote(noteId) {
this.notes = this.notes.
filter((note) => note.id !== noteId);
},
},
};
</script>
<style>
#app {
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.input-container {
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.input-container input {
flex-grow: 1;
padding: 10px;
margin-right: 10px;
border: 1px solid #ddd;
border-radius: 5px;
}
.input-container button {
background-color: #3498db;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 3px;
cursor: pointer;
}
.input-container button:hover {
background-color: #2980b9;
}
</style>
<!-- NoteTaking.vue -->
<template>
<div class="note">
<p>{{ note.text }}</p>
<button @click="deleteNote">
Delete
</button>
</div>
</template>
<script>
export default {
props: ['note'],
methods: {
deleteNote() {
this.$emit('delete', this.note.id);
},
},
};
</script>
<style scoped>
.note {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f9f9f9;
margin-bottom: 15px;
padding: 15px;
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.note p {
margin: 0;
}
.note button {
background-color: #e74c3c;
color: #fff;
border: none;
padding: 8px 15px;
border-radius: 3px;
cursor: pointer;
}
.note button:hover {
background-color: #c0392b;
}
</style>
Output:
Getting Started with VueJS
VueJS is a JavaScript framework for creating user interfaces. Vue.js, often simply referred to as Vue, is known for its simplicity and flexibility. Vue has gained widespread popularity among developers for its ease of integration. Vuejs is also used for single-page web applications, the same as ReactJS.
Table of Content
- What is VueJs?
- How to set up VueJS and create a VueJS project?
- Important concepts of VueJS
- Creating a simple notes app using VueJS
- VueJS FAQs
Contact Us