Getting started with MDX and Vue.js/Nuxt.js

Getting started with MDX and Vue.js/Nuxt.js

We will have a look at MDX and how to get started with it in Vue.js/Nuxt.js applications. Markdown, since its introduction to the web, has allowed content creators to have a more simplistic tool to do their authoring in.

Markdown, since its introduction to the web, has allowed content creators (such as technical writers and documentation engineers, etc.) to have a more simplistic tool to do their authoring in. In this article, we will have a look at MDX and how to get started with it in Nuxt.js applications.

Prerequisites

  • To follow along you’ll need to be familiar with Markdown and Vue.js/Nuxt.js

What is MDX?

MDX is a syntax extension that allows you to write JSX in your Markdown documents. Also, according to the official MDX documentation, MDX is:

An authorable format that lets you seamlessly write JSX in your Markdown documents. You can import components, such as interactive charts or alerts, and embed them within your content

So basically, MDX is Markdown with JSX. Before MDX, writing JSX in Markdown was a hassle because the simplicity of authoring Markdown was lost in the process of sprinkling JSX in it.

MDX opens the door to a lot of fun applications to Markdown documents. For example, the Chakra UI documentation website uses MDX to allow readers to edit components and see their changes live on the page.

MDX is useful for design systems documentations like we mentioned above with the Chakra UI documentation usage of MDX. MDX also allows you to import Markdown(.md or .mdx) files as components!

Features of MDX

  • MDX blends Markdown and JSX perfectly to allow for more expressive authoring in a JX-based project
  • Easily import and render JSX components in your markdown documents
  • Highly customizable which allows you to determine which component is rendered for each markdown element
  • The simplicity of markdown is maintained, you only need to use JSX where you want to
  • MDX does not have any runtime because all compilation occurs during the build stage. This make MDX really fast

MDX and Vue.js

Though JSX was originally used in React projects, you can now use it as well in Vue.js. With that said, you can freely integrate MDX in your Vue.js projects.

Features of MDX in Vue.js

  • MDX allows you to import .md or .mdx files as Vue components
  • MDX also allows you to import Vue components inside markdown documents
  • Using the MDX provider, you can replace markdown elements with Vue components

Let’s see these features in action by integrating MDX and Vue. We will get started by creating a fresh Vue project. Using the Vue CLI run:

vue create mdx-vue-demo

After creating the Vue projects we will add MDX support by installing @mdx-js/vue-loader which is the official loader that makes it possible to use MDX in Vue. Let’s install it below:

npm install @mdx-js/vue-loader

After we’ve installed the loader we will then include the loader inside our project’s webpack config. Since we are using Vue CLI, we can create a vue.config.js file in the root of our projects, and on the configureWebpack property, we include @mdx-js/vue-loader under the module rules:

// vue.config.js
module.exports = {
  configureWebpack: {
    module: {
      rules: [
        {
          test: /\.mdx?$/,
          use: ['babel-loader', '@mdx-js/vue-loader'],
        },
      ],
    },
  },
};

What the code means is that any file ending with .md or .mdx will be handled by both babel-loader and @mdx-js/vue-loader

The step above is still the same if you are configuring your Vue application using webpack. You just have to include the loader in webpack.config.js likes so:

// webpack.config.js
module: {
  rules: [
    // ...
    {
      test: /\.mdx?$/,
      use: ['babel-loader', '@mdx-js/vue-loader']
    }
  ]
}

Importing Markdown in a Vue component

Now that we have both installed and configured @mdx-js/vue-loader let’s create a md file in src/ directory and render it as a Vue component in src/App.vue. We will create MyFirstMdx.md in the components/ directory and add the following content:

## Hello LogRocket

from markdown powered by MDX

Import the .mdx file in src/App.vue as you will import a Vue component. Like so:

import MyFirstMDX from '@/components/MyFirstMdx.md'

We will register the component:

components: {
  MyFirstMdx
}

Then replace the template in App.vue with <my-first-mdx />. The App.vue file should now look like this:

<template>
  <div id="app">
    <my-first-mdx />
  </div>
</template>
<script>
import MyFirstMdx from "./components/MyFirstMdx.mdx";
export default {
  name: "App",
  components: {
    MyFirstMdx,
  },
};
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Start the Vue development server and you will see the content of MyFirstMdx.md when you visit your app in the browser.

nuxt vue javascript programming developer

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue.js Web App Development | Skenix Infotech

Our expert Vue.js developers follows Agile methodology that delivers high-quality & affordable Vue.js services. Hire Vue.js Developer from Skenix Infotech.

Learning JavaScript: Development Environments for JavaScript Programming

One of the nice things about learning JavaScript these days is that there is a plethora of choices for writing and running JavaScript code. In this article, I’m going to describe a few of these environments and show you the environment I’ll be using in this series of articles.

Useful Tools In Vue.js Web Development

Useful Tools In Vue.js Web Development. There are some tools that developers that are just getting started with Vue or sometimes, have experience building with Vue sometimes do not know exist to make development in Vue a lot easier.

Learn the Basics of the JavaScript Framework Vue.js

Vue.js for Beginners: A beginner's guide to learn the basics of the JavaScript Framework Vue.js. Vue has quickly become one of the most popular JavaScript frameworks. In this course, all of the examples that we walkthrough can be done by adding Vue to a single HTML file and writing a little bit of JavaScript.

Displaying Modals in a Vue App with the vue-js-modal Library

A modal with many options. Displaying Modals in a Vue App with the vue-js-modal Library. Vue.js is an easy to use web app framework that we can use to develop interactive front end apps. In this article, we’ll look at Vue packages for adding modals with the vue-js-modal library.