Table of Contents
A very simple note-taking application to know how to manage information between multiple components in Vue. It's based on chapter 4 and 5 of the book "Fullstack Vue 3".
Before cloning and using this application, you'll need to install these things on your computer:
- Visual Studio Code: You can choose any IDE or Text Editor that you want. To build a simple application like this, I recommend Visual Studio Code.
- Live Server: An extension for Visual Studio Code that help to launch a local development server with live reload feature for static & dynamic pages.
You can install this application by cloning this repository into your current working directory:
git clone https://github.com/theEmperorofDaiViet/note-taking.gitAfter cloning the repository, you can open the project by Visual Studio Code.
Click to Go Live from the status bar to turn the server on/off.
As usual, the app should automatically open in a new tab in your browser. It runs on port 5500 by default.
Our note-taking app will have a simple input field that allows a user to enter notes. When the user types information and presses the Enter key, the user input should be displayed in the Notes column and the timestamp of that submission should be seen in the Timestamp column. Since v2.0.0, our app also displays the number of notes a user has entered.
We will use different ways of managing data between components:
v1.0.0: using Custom Eventv2.0.0: implement an Event Bus by mitt - an external event emitter libraryv2.0.0: using Vuex
Our app looks like this:
You can contact me via:
