Markdown Previewer using VueJs

This is the first project under Data Visualization Certification from FreeCodeCamp . FCC recommends using ReactJS for this. But, I used VueJS in this project because it was easier and it gets things done fast. I used Bootstrap for styling and making a responsive design.

You can see the project live here.

This is the first time that I am using VueJS on my own without the help of any tutorial. In this article, I will try to explain how to create this app in detail.

1. Scaffolding — App set up

Vue CLI tool is very helpful for setting up the app. It automatically creates package.json, .gitignore, assets, index.html and other necessary files for the project.

First install vue and vue-cli:

npm install --save vue

npm install --save vue-cli

Initialize a project using webpack-simple template.

vue init webpack-simple md-viewer and follow the instructions

After the project is created,

cd md-viewer
npm install

You can see the project running on the local server using

npm run dev

The advantage of using vue-cli with webpack template is that it auto-reloads after changes in the code.

Now, install the npm module, marked, which is a markdown parser library.

npm install --save marked

2. Creating Vue Components

Vue components are reusable and makes our code DRY. For this project, I created 3 components — header, the main app and footer. The header and footer can be used for other projects as well.

Header and footer components are simple templates containing header and footer elements respectively. Refer the project repo to see the templates. They are very simple and therefore I wont go into the details.

To use the header and footer templates in the main App.vue, import the templates in the script portion of App.vue—

import header from './header.vue'
import footer from './footer.vue'

Then export them as components to be used in App template —

export default {
  name: 'app',
  data () {
    //data objects here
  },
  computed: {
     //methods to modify the data objects here, dealt with later
  },
  components: {
    'app-header': header,
    'app-footer': footer
  }
}

Now we can use the app-header and app-footer components in App.vue template:

<template>
  <div id="app">
   <app-header></app-header>
   <div class = "container">
     <!--The main App-->
   </div>
   <app-footer></app-footer>
  </div>
</template>

3. The main App functionality

The App template consists of two div elements — One text area for entering the text and one for showing the Preview. The directive v-model is used to store the text entered in the textarea.

The key part in this project is to convert the markdown text to a formatted preview using the marked library. In the computed property of App component, perform the conversion function of the text entered (which is stored in a variable using v-model):

computed: {
 previewText() {
  marked.setOptions({
    renderer: new marked.Renderer(),
    gfm: true,
    tables: true,
    breaks: true,
    pedantic: false,
    sanitize: true,
    smartLists: true,
    smartypants: false
  });
  return marked(this.md_text)
 }
}

previewTextcontains the parsed HTML text. This is then rendered on the preview div using v-html directive. This directive interprets the raw HTML text and renders the formatted text.

4. App Demo

The project repository is here.

It is hosted live on surge here.

The Project finally looks like this —

Markdown Previewer App using VueJS and Bootstrap