Vue.js CRUD example – a simple Note App

vue-js-crud-example-a-simple-note-app-feature-image

In this tutorial, we’re gonna create a simple Note App that represents Vue.js CRUD example with Vue CLI 3 for building project.

More Practice:
Vue.js Firebase Database example – CRUD Operations
Vue.js Firestore example – Vue.js CRUD serverless with Firebase Cloud Firestore

Vue.js CRUD example Overview

Goal

Our Vue App can help us write new Notes, then it displays a list of Notes and each Note page (containing title and content) can be modified easily:

vuejs-crud-example-note-app-overview

Project Structure

vuejs-crud-example-note-app-project-structure

We have 3 components:
App.vue holds all of the other components.
NotesList.vue contains all of notes in a List with + Note button.
Note.vue display a single Note in the List that allows us to create new Note or edit current Note.

Technologies

– Vue CLI 3.0.1
– Vue 2.5.17

Practice

Setup Project
Install vue-cli

For use Vue CLI anywhere, run command:
npm install -g vue-cli

Init Project

Point cmd to the folder you want to save Project folder, run command:
npm create vue-note-app

You will see 2 options, choose default:

vuejs-crud-example-note-app-project-setup-1

Build Components
Note Component

Inside components folder, create Note.vue file that will contain title field and content field of a Note:

Let’s describe the code above:
– First we check if we have valid Note. If not, it show a message telling the user to create new Note:

– If we have a Note to work with, we bind two modals: note.title & note.content.
– Then we have a Remove button to handle removing the current Note.

– We define a property props: ["note"] and a method that emits event to the parent component:

NotesList Component

Inside components folder, create NotesList.vue file that handles the list of Notes:

– First we iterate over each Note using v-for directive, assign active class if that Note is in use add a click listener that calls changeNote() when clicked on.
We also have a separate click listener that call addNote() for creating new Note.

– And the component we define is so simple. We have two properties:
+ notes array of all the Notes.
+ activeNote number for the Note that user is clicking on.
2 methods emit the event to the parent component.

App Component

With our setup Project step, we have a specific structure.
Now check public/index.html file with id="app" element. We add Bootstrap, the code will be like:

Inside src/main.js, we can see that Vue is imported alongside the App.vue component, render the component at the element with id of #app:

Now we modify code inside App.vue:

Let’s describe the code above.
– First, we import 2 components above (NotesList and Note).
– Then we define the data() function that returns array of Notes and a number for current Note’s index in the array:

– Look at the template:

Please remember that we have used $emit in 2 child Components before:
+ Note Component: $emit("app-removeNote")
+ NotesList Component: $emit("app-changeNote", index) & $emit("app-addNote")

Now we have 3 event handlers with @app- prefix that point to corresponding methods inside App component:

Run and Check Result

– Run Vue.js App with command: npm run serve.
– Open browser with url: http://localhost:8080/.
– Check result:

vuejs-crud-example-note-app-overview

Source Code

vue-note-app

By grokonez | September 4, 2018.



Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*