Vue.js 2 Web Development Projects

The status bar

The last section we will add to our app is a status bar, displayed at the bottom of the text editor, with some useful info--the date the note was created, with the lines, words, and characters count.

Create a new div element with the toolbar and status-bar classes and place it after the textarea element:

<!-- Main pane -->
<section class="main">
  <div class="toolbar">
    <!-- ... -->
  </div>
  <textarea v-model="selectedNote.content"></textarea>
  <div class="toolbar status-bar">
    <!-- The new status bar here! -->
  </div>
</section>