Displaying Markdown/ Strapi Rich Text in the Nuxt Frontend.
Tags: markdown, nuxt, javascript, vue
Published: 2020-09-29 14:09:52

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.

![Screenshot of markdown not parsed on the front end](https://dev-to-uploads.s3.amazonaws.com/i/1axt1qxxojbz0vufc1as.jpg)
<figcaption>Here, you can see that my content is all smashed together, even if I use v-html in the template tag. Also, the link is not a proper link.</figcaption>

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

For my project, I decided to use an npm package, [markdownit](https://www.npmjs.com/package/@nuxtjs/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:
```javascript
  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:

```javascript
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:

```html
<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:

![Screenshot of Parsed Markdown](https://dev-to-uploads.s3.amazonaws.com/i/jga0rbj2vuokvx4g8313.jpg)

<figcaption>As you might notice, now, my content is nicely broken up into new paragraphs, and the link is a proper link now.</figcaption>

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](https://github.com/cwray-tech/portfolio-frontend), and the [backend Strapi application here](https://github.com/cwray-tech/portfolio-backend).