DEV Community

loading...

Vue.js CRUD example - a simple Note App

loizenai profile image loizenai ・2 min read

https://grokonez.com/frontend/vue-js/vue-js-crud-example-a-simple-note-app

Vue.js CRUD example - a simple Note App

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 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

More:
https://grokonez.com/frontend/vue-js/vue-js-crud-example-a-simple-note-app

Discussion (0)

Forem Open with the Forem app