This is a quick post to show the different ways we can use to make Vue.jscomponents available inside Markdown content.

Vue-powered Static Site Generator. This package does not support vue1.X.X. A powerful and highspeed Markdown component for Vue. This is an extension to miaolz123's vue-markdown.The last update to vue-markdow code was in 2017, and is not actively maintained (dependencies contain security vulnerabilities).

And at the same time, see how we can import .md files inside Vue.jscomponents.

This is possible thanks to the hard work being done onfrontmatter-markdown-loader.

As a starting point, we’ll use the code from the Nuxt.js app weget from following the Quickstart guide for a new Nuxt.js project.

With the app ready, get into its directory and install thefrontmatter-markdown-loader:

Then add a new webpack rule to nuxt.config.js, thiswill allow us to import Markdown files:

Now let’s create a new content/blog directory:

Create a frontmattered Markdown file at content/blog/my-post.md with this content:

Sqlmap commands cheat sheet. SQL commands Cheat Sheet by sjm - Cheatography.com Created Date: 0104Z.

Get used to closing tags when using HTML inside Markdown.

§ Globally available component

Create a components/GlobalComponent.vue file:

To make it globally available, we need to register it in that way.

Create a new plugin for registering global components atplugins/global-components.js:

Then in nuxt.config.js:

§ Locally available component

Create a components/LocalComponent.vue file:

Markdown-it

§ Async component

Create a components/AsyncComponent.vue file:

Let’s take this approach for a spin —Shall we?
For the sake of this PoC, change your pages/index.vue file to this:

Vue Js Markdown Parser

Launch your dev server with:

Navigate to http://localhost:3000 and you should see something like this:

Vue Js Markdown Download

This is just a stepping stone on my way to writing a full blog systemthat uses mainly Markdown for content, but can include Vue.jscomponents in a painless way.