Vue.js Note Project

A Vue.js Project with LocalStorage

  • Sass/CSS
  • RWD
  • JavaScript
  • Vue.js / Vue-cli

Qick Summary

  • Users can take notes and edit notes with local storage in browser so that the notes will not disppear while the browser fresh.
  • Users can decide their customized tags and search notes with keywords easily.
  • The project was built with single page application by vue-router.
  • A real backend database such as Firebase I want to intergrate to my note project with user authentication in the future.

Features

Notes List Main Page

Notes can be easily search by keyword or tags

  • All edited notes can be saved in the browser's local storage until the note list page was loaded to get data in local storage.

View & Delete Notes

View and delete each note.

  • Used the unique id (uuid library) to build the path in vue-router rendering.

Editing note

Edit Notes

  • Finished with two-data binding feature from Vue.js.
  • Used "set" instead of "array" of JavaScript to achieve the unique value when users added new repeated tags.

Mobile Application

Responsive Web Design (RWD)