To use Front Matter and markdown in Nuxt JS

README.md

Use markdown with yaml metadata with Nuxt JS

Use the following repo as base

Example taken from https://github.com/davidroyer/nuxt-markdown-example

change the slug.vue file

change the nuxt.config.js

Remove the nuxt-markdownit dependencies.

Use the raw loader instead for markdown

  config.module.rules.push({
    test: /\.md$/,
    use: ['raw-loader']
  })

nuxt.config.js

const pkg = require('./package')
const { join } = require('path')
const dir = require('node-dir')
const routesArray = []
const fs = require('fs')
const _ = require('lodash')

var files = fs.readdirSync('./static/dynamicMarkdownFiles');
function createRoutesArray() {
  files.forEach(function (file) {
      var name = file.substr(0, file.lastIndexOf('.'));
      var route = '/post/' + name
      routesArray.push(route)
  });
}

function returnRoutes() {
  dir.readFiles('./static/dynamicMarkdownFiles', {
        match: /.md$/,
        shortName: true,
        exclude: /^\./
        }, function(err, content, next) {
            if (err) throw err;
            // console.log('content:', content);
            next();
        },
        function(err, files){
            if (err) throw err;
            // fileNamesArray = [];
            files.forEach(function (file) {
                var name = file.substr(0, file.lastIndexOf('.'));
                var path = '/post/' + name
                return path
            });
        });
}
// const fs = require('fs')
// const axios = require('axios')
// // const _ = require('lodash')

//
function getSlugs(post, index) {
  let slug = post.substr(0, post.lastIndexOf('.'));
  return `/post/${slug}`
}
//
//const postsArray = require('.//posts.json')

module.exports = {
  mode: 'universal',

  /*
  ** Headers of the page
  */
  head: {
    title: "Chris Choy - chsquare.com",
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: pkg.description }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }

    ]
  },
  generate: {
  routes: function() {

    return files.map(getSlugs)
    // return _.map(routesArray, function(file) {
    //   let slug = file.substr(0, file.lastIndexOf('.'));
    //   return `/dynamic/${slug}`
    // })

  // return axios.get('~/static/posts.json')
  // .then((res) => {
  //   return _.map(res.data, function(post, key) {
  //     return `/dynamic/${post.slug}`
  //   })
  //
  // })
  }
  },
  /*
  ** Customize the progress-bar color
  */
  loading: { color: '#fff' },

  /*
  ** Global CSS
  */
  css: [
   { src: 'node_modules/highlight.js/styles/hopscotch.css', lang: 'css' },
   { src: 'assets/style.css', lang: 'css'},
   { src: 'node_modules/animate.css/animate.css', lang: 'css'}
  ],

  /*
  ** Plugins to load before mounting the App
  */
  plugins: [
  ],

  /*
  ** Nuxt.js modules
  */
  modules: [
    // Doc:https://github.com/nuxt-community/modules/tree/master/packages/bulma
    '@nuxtjs/bulma',
    ['nuxt-fontawesome', {
      component: 'fa', 
      imports: [
        //import whole set
        {
          set: '@fortawesome/free-solid-svg-icons',
          icons: ['fas']
        },
        {
          set: '@fortawesome/free-brands-svg-icons',
          icons: ['fab']
        }
      ]
    }]
  ],
  /*
  ** Build configuration
  */
  build: {

    postcss: {
      preset: {
        features: {
          customProperties: false
        }
      }
    },
    /*
    ** You can extend webpack config here
    */
    extend(config, ctx) {
      // Run ESLint on save
      if (ctx.isDev && ctx.isClient) {
        config.module.rules.push({
          enforce: 'pre',
          test: /\.(js|vue)$/,
          loader: 'eslint-loader',
          exclude: /(node_modules)/
        })
      }
      config.module.rules.push({
        test: /\.md$/,
        use: ['raw-loader']
      })
    }
  }
}

nuxt_with_front_matter_markdown.vue

<template>
  <div :key="$route.params.slug">
    <section class="hero is-primary">
      <div 
        class="hero-body" 
        style="padding-top:100px;">
        <div class="container">
          <h1 class="title">
            {{ attributes.title }}            
          </h1>
          <h2 
            v-if="attributes.date"
            class="subtitle">
            {{ new Date(attributes.date).toLocaleDateString() }}
          </h2>
        </div>
      </div>
    </section>
    <div class="container">
      <div 
        class="contentWrapper content" 
        v-html="content"/>
    </div>
  </div>



</template>

<script>
const fm = require('front-matter')
var md = require('markdown-it')({
  html: true,
  linkify: true,
  typographer: true
})


export default {
  async asyncData ({params}) {
    const fileContent = await import(`~/static/dynamicMarkdownFiles/${params.slug}.md`)
    let res = fm(fileContent.default)
    return {
      attributes: res.attributes,
      content: md.render(res.body)
    }
  }
}
</script>

<style>
</style>