Displaying Markdown/ Strapi Rich Text in the Nuxt Frontend.

We are making progress! I now have the majority of the homepage done, and a good part of the Strapi backend.

For those of you just joining, this is a series through the process of building my personal portfolio with Nuxt, Strapi and TailwindCSS.

Now, I will write about displaying markdown/ or Strapi rich text attributes in the frontend.

Strapi has a rich text editor that generates markdown. If we want to display the markdown in the frontend, then we need to parse the markdown into HTML.

This looks pretty bad, so we need to parse the markdown correctly.

For my project, I decided to use an npm package, markdownit for this. It provided the fastest and most simple route of quickly parsing data on the front end and took less than 5 minutes to integrate into the site.

First, I installed the package by running:

yarn add @nuxtjs/markdownit

This added the package to my node_modules folder and added the package as a dependency in my package.json.

Then, I added the package to my nuxt.config.js file:

  modules: [
    '@nuxtjs/markdownit'
  ],

  // This is for displaying rich text content in the frontend.
  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    injected: true
  }

Then, I needed to parse the content in the Vue page component.

I needed to do this a little differently than what is described in the docs because I am parsing the data from the Strapi API on the Nuxt Server with asyncData().

In order to use the markdown package, I needed to pass $md into the asyncData() method, and use it to parse the markdown before passing it into the template.

Here is what my script tag in the Vue page component looks like after passing in $md and using it to render the markdown:

export default {
  async asyncData({ $axios, $md }) {

    //I am also using axios to get the content from the Strapi API.
    const home = await $axios.$get("/home-page");
    //This is where I use $md to parse the markdown for the example in the photos.
    const content = $md.render(home.content);

    const apiRoute = 'http://localhost:1337';

    const heroImageUrl = apiRoute + home.hero_image.url;

    const posts = await $axios.$get("/posts?_limit=4");

    const projects = await $axios.$get("/projects?_limit=2");

    const project = projects[0];
    const projectImage = apiRoute + project.main_image.url;
    const projectDescription = $md.render(project.description)

    const secondProject = projects[1];
    const secondProjectImage = apiRoute + secondProject.main_image.url;
    const secondProjectDescription = $md.render(secondProject.description)


    return {
      home,
      heroImageUrl,
      posts,
      content,
      project,
      projectImage,
      projectDescription,
      secondProject,
      secondProjectImage,
      secondProjectDescription };
  },
};

As you may see, the part I am parsing is the home.content and the project descriptions.

You may also notice I built several other variables for accessing that data a little faster in the Vue Template.

Final Step

The last thing I needed to do, is make sure that my template in the Vue page component was properly referencing the data.

For the home content it looks like this:

<div class="prose prose-lg text-gray-500 mx-auto" 
v-if="content" 
v-html="content"></div>

Here is a screenshot of the markdown now:

Well, that is how you parse markdown in Nuxt! Would love to know your thoughts. Anything you would do differently?

You can also look at my portfolio frontend code here, and the backend Strapi application here.