How to Include Markdown From Other Markdown Files [Gridsome Guide]

This is part nineteen of a series on building a file-based blog from scratch with Gridsome. Find the full series here.

Here's a quick way to include markdown files inside other markdown files with @gridsome/vue-remark.

If set up properly, it allows you to import other markdown files like this:

import OfficeIpsum from '../markdown-snippets/officeipsum.md'

<office-ipsum />

Two things are necessary for this to work: 1. A working Vue Remark setup 2. Set up the include path for Vue Remark

Your gridsome.config.js file should now contain a correct setup for the @gridsome/vue-remark plugin:

module.exports = {
  // content skipped for readability …
  plugins: [
    {
      use: '@gridsome/vue-remark',
      options: {
        typeName: 'BlogPost',
        baseDir: './content/blog',
        route: '/:slug',
        template: './src/templates/BlogPost.vue',
        includePaths: ['./content/markdown-snippets'], // ⬅️ here you need to include all paths from where you want to import markdown files
        plugins: [
          ['gridsome-plugin-remark-shiki', { theme: 'nord', skipInline: true }]
        ],
        refs: {
          tags: {
            typeName: 'Tag',
            create: true
          }
        }
      }
    },
  // content skipped for readability …
}

Quick note: if the import inside your markdown files doesn't work, try padding it with one blank line before and after.

That's it for this addition to my Gridsome series.

If you have more questions about Gridsome, check out the full Gridsome tutorial or shoot me an email at simon@mannes.tech.