gridsome-plugin-mdvue

mdvue plugin for gridsome

Quick Overview

mdvue allows markdown files to be written to include vue components and style blocks and be rendered as vue single file vue components

Install

yarn add gridsome-plugin-mdvue

Useage

1. Add gridsome-plugin-vue in your gridsome.config file

module.exports = {
    plugins: [
        {
            use: 'gridsome-plugin-mdvue'
        }
    ]
}

2. Create your markdown components as .mdvue or .mdv files

import HelloWorld from '@/components/HelloWorld'
 
# Hello World
 
<HelloWorld/>
 
---
 
Welcome to my gridsome site :)
 
<style>
    h1 {
        color: cornflowerblue;
    }
</style>

3. Use the markdown component like any other vue component

<template>
    <my-mdvue-hello/>
<template>
 
<script>
    import MyMdvueHello from '@/componets/my-mdvue-hello.mdvue';
    
    export default {
        components: {
            MyMdvueHello,
        }
    }
</script>