vue-markdoc

KO | EN

gitlite — search

#hacktoberfest #react #ai #android #rust #macos #nodejs #java #windows #cli #kubernetes #vue #awesome-list #security

(★ 18)

Vue renderer for Markdoc

vue-markdoc Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-markdoc

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

## Installation

```bash
pnpm add @markdoc/markdoc vue-markdoc
```

## Usage

```html
<script setup>
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)
</script>

<template>
  <ContentComponent />
</template>
```

## 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
<script setup>
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)
</script>

<template>
  <ContentComponent />
</template>
```

```html
<template>
  <div class="callout">
    <slot />
  </div>
</template>

## Related

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

## License

MIT

vue-markdoc

vue-markdoc Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vue-markdoc

vue-markdoc Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README