Vue Js Markdown

A few weeks ago, I created a few videos of me converting jQuery plugins to vanilla JS. I thought it would be fun to do the same thing with the demo projects from a few popular frameworks.

Today, I’m converting the Vue.js markdown editor demo into vanilla JS. Let’s dig in.

Watch me code

If you want, you can watch me code this project.

Jan 01, 2019 Last year, 2018, I was very focused on learning more about JavaScript, which was a pending subject and at the same time I learnt Vue.js. Meanwhile at my workplace, we started using Nuxt.js a framework on VueJS to remake both company's static and dynamic (SPA) webapps into components and create a design system with it.

  1. This is the default slot After setting up the middleware in your vue component above, using the embedded markdown is as easy as writing it between the vue-markdown tags. VueMarkdown has a default slot which is used to write the markdown source.
  2. Integrate Markdown to manage form. Vue JS is a very popular JavaScript front-end framework that was designed specifically to help you write Web apps.
  3. See full list on github.com.
  4. In this video I discuss Vuepress the new Vue.js static site generate by the people who created Vue.js. This markdown centered project will make it easy for you to create documenation for your site.

You can also download the source code on GitHub. Hiveswap: act 2 soundtrack edition download for mac.

How I approached this project

The first thing I did was rip out Vue and lodash from the source code. We’re not going to need either of them. I left in the marked.js library, however, because converting markdown to HTML is something I’m happy to let a library handle for me.

I also stripped out all of the Vue syntax and properties from the elements in the HTML.

Next, I used the querySelector() method to get the textarea element, and the div that the compiled HTML is getting rendered into.

Brandonferens

Converting markdown to HTML

Whenever the value of the textarea changes, we want to parse it into markdown and render it into the UI.

The Vue demo uses lodash to debounce this event so that it only runs after the user has stopped typing for 300 milliseconds. The thing is, we don’t need a whole 30kb library for that!

First, I attached an input event handler to the text element with the addEventListener() method. I passed in a named function, changeHandler(), as my callback.

In the changeHandler() function, I pass the text.value, the text in the textarea element, into the global marked() function that marked.js creates. I also kept the {sanitize:true} option that was in the Vue.js demo.

Then, I use the innerHTML property to inject the resulting HTML into the compiled element.

You typically want to sanitize third-party content like user-generated inputs, but the older version of marked.js that the demo uses appears to do this for you.

Markdown

Debouncing without lodash

Now, let’s debounce this so that it only runs after the user stops typing. First, I created a debounce variable that will store the current pending callback.

Inside the changeHandler() function, I use the setTimeout() method to run the “convert to markdown” code after a 300 millisecond delay, and assign it to the debounce variable.

Whenever the changeHandler() function is called, I first use the clearTimeout() method to cancel any existing setTimeout() assigned to debounce so that it doesn’t run. As a result, only the last instance of the function will run.

Four lines of code negated the need for a 30kb JS library.

Adding default text

The Vue demo starts with some code in the textarea. Because it uses state-based UI, that value is part of a JS object.

But we can get the same effect by just adding the text we want directly to the textarea element.

We also want to render this initial text to HTML when the page loads.

I moved the code to convert the text.value to HTML and inject into the UI into a new function: render(). I call this function in my setTimeout().

Then, in addition to setting up an event listener, I call my render() function when the page loads to convert any initial text to HTML.

And with that, the project is done.

Wrapping up

Vue js markdown editor

See Full List On Github.com

The finished project is 18 lines of code, with white space and in-code documentation. The Vue demo is 16 lines of code with no space, no documentation, and an extra 60kb of frameworks and libraries.

Transtone

Obviously this was a very simple project, but hopefully you can see that for a lot of tasks, the vanilla JS versions are just as simple, with far fewer dependencies.