https://github.com/wobsoriano/vite-plugin-markdoc-vue

Render Markdoc extended markdowns as Vue components.
https://github.com/wobsoriano/vite-plugin-markdoc-vue

markdoc markdown vue

Last synced: 4 months ago
JSON representation

Render Markdoc extended markdowns as Vue components.

• Host: GitHub
• URL: https://github.com/wobsoriano/vite-plugin-markdoc-vue
• Owner: wobsoriano
• License: mit
• Created: 2022-05-13T19:37:25.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2023-08-02T21:50:47.000Z (over 1 year ago)
• Last Synced: 2024-10-02T08:52:31.433Z (5 months ago)
• Topics: markdoc, markdown, vue
• Language: TypeScript
• Homepage:
• Size: 187 KB
• Stars: 12
• Watchers: 2
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-markdoc-vue

A plugin that enables you to import [Markdoc](https://markdoc.io/) extended markdowns as Vue components.

## Installation

Install the [renderer](https://github.com/wobsoriano/vue-markdoc) and plugin:

```bash

pnpm add @markdoc/markdoc vite-plugin-markdoc-vue -D

```

### TypeScript Shim

where needed:

```ts

declare module '*.vue' {

  import type { ComponentOptions } from 'vue'

  const Component: ComponentOptions

  export default Component

}

declare module '*.md' {

  import type { ComponentOptions } from 'vue'

  const Component: ComponentOptions

  export default Component

}

```

then add the following to `vite.config.ts`

```ts

import { defineConfig } from 'vite'

import Vue from '@vitejs/plugin-vue'

import MarkdocVue from 'vite-plugin-markdoc-vue'

export default defineConfig({

  plugins: [

    Vue({

      include: [/\.vue$/, /\.md$/], // <--

    }),

    MarkdocVue(),

  ]

})

```

And import it as a normal Vue component.

## Import Markdown as Vue components

```html

import Content from './content.md'

  

```

## Render Vue components

Imported markdown files accepts an optional `components` object as a `prop`. The `components` object specifies a mapping from your tags and nodes to the corresponding Vue component.

First, add your transformation options to the plugin:

```ts

const tags = {

  callout: {

    render: 'Callout',

    attributes: {}

  }

}

export default defineConfig({

  plugins: [

    Vue({

      include: [/\.vue$/, /\.md$/], // <--

    }),

    MarkdocVue({

      tags

    }),

  ]

})

```

Then pass your custom component:

```md

{% callout %}

Attention, over here!

{% /callout %}

```

```html

import Content from './content.md'

import Callout from './Callout.vue'

  

```

```html

  


    

  


.callout {}

```

This renders to:

```html

  


    
Attention, over here!

  


```

## Configuration

The plugin accepts an optional [`Markdoc.transform`](https://markdoc.io/docs/syntax#config) config:

```ts

// vite.config.ts

export default defineConfig({

  plugins: [

    Vue({

      include: [/\.vue$/, /\.md$/], // <--

    }),

    MarkdocVue({

      nodes: {},

      tags: {}

    }),

  ]

})

```

## Related

- [vue-markdoc](https://github.com/wobsoriano/vue-markdoc) - Vue renderer for Markdoc

- [vite-plugin-markdoc](https://github.com/wobsoriano/vite-plugin-markdoc) - Markdoc plugin for Vite

## License

MIT