Vue.js 2 Web Development Projects

Project 1 - Markdown Notebook

The first app we will create is a markdown notebook, using several Vue features in a step-by-step manner. We will reuse what we saw in Chapter 1, Getting Started with Vue, and add more elements on top of it, such as useful directives, events for user interaction, more instance options, and filters to process values.

Before we start writing the code, let's talk about the app and review our objectives:

• The notebook app will allow the user to write notes in markdown
• The markdown will be previewed in real time
• The users will be able to add as many notes as they want
• The notes will be restored the next time the user visits the app

To do that, we will divide the user interface into three sections:

• A main section ...