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

Vue renderer for Markdoc
https://github.com/wobsoriano/vue-markdoc

markdoc markdown vue

Last synced: about 1 month ago
JSON representation

Vue renderer for Markdoc

• Host: GitHub
• URL: https://github.com/wobsoriano/vue-markdoc
• Owner: wobsoriano
• License: mit
• Created: 2022-05-13T07:05:09.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2023-08-02T20:56:36.000Z (over 1 year ago)
• Last Synced: 2024-10-02T08:52:19.851Z (about 2 months ago)
• Topics: markdoc, markdown, vue
• Language: TypeScript
• Homepage:
• Size: 222 KB
• Stars: 17
• Watchers: 3
• Forks: 3
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-markdoc

Transform [Markdoc](https://markdoc.io/) renderable trees to Vue components.

## Installation

```bash

pnpm add @markdoc/markdoc vue-markdoc

```

## Usage

```html

import Markdoc from '@markdoc/markdoc'

import render from 'vue-markdoc'

const doc = `

# Getting started

Run this command to install the Markdoc library:

`

const ast = Markdoc.parse(doc)

const content = Markdoc.transform(ast)

const ContentComponent = render(content)

  

```

## Rendering Vue components

To render a Vue component, provide the `components` object as an argument along with the `content`. The `components` object specifies a mapping from your tags and nodes to the corresponding Vue component.

```html

import Markdoc from '@markdoc/markdoc'

import render from 'vue-markdoc'

import Callout from './Callout.vue'

const tags = {

  callout: {

    render: Callout,

    attributes: {}

  }

};

const doc = `

{% callout %}

Attention, over here!

{% /callout %}

`;

const ast = Markdoc.parse(doc)

const content = Markdoc.transform(ast, { tags })

const ContentComponent = render(content)

  

```

```html

  


    

  


.callout {...}

```

## Related

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

## License

MIT