rehype-vue-sfc v0.0.0

rehype-vue-sfc

A rehype plugin, converting HTML AST to a Vue single file component.

Usage

An example using unified:

import { unified } from 'unified'
import remarkParse from 'remark-parse'
import remarkRehype from 'remark-rehype'
import rehypeRaw from 'rehype-raw'
import rehypeStringify from 'rehype-stringify'
import rehypeVueSFC from 'rehype-vue-sfc'

const processor = unified()
  .use(remarkParse) // parse markdown to AST
  .use(remarkRehype, { allowDangerousHtml: true }) // convert markdown AST to HTML AST
  .use(rehypeRaw) // preserve inline html tags
  .use(rehypeVueSFC) // convert HTML AST to Vue SFC
  .use(rehypeStringify) // stringify

const file = await processor
  .process('# Hello, *Vue SFC*!') // input

console.log(String(file)) // <template><h1>Hello, <em>Vue SFC</em>!</h1></template>

Options

hoistStyleTags

• Type: boolean
• Default: true

By default, all <style> tags are hoisted to the top of the <template> block. Set this option to false to disable this behavior.

# Hello

Markdown content

<style>
.foo {
  color: red;
}
</style>

Will be converted to:

<template>
  <h1>Hello</h1>
  <p>Markdown content</p>
</template>

<style>
.foo {
  color: red;
}
</style>

hoistScriptTags

• Type: boolean
• Default: true

By default, all <script> tags are hoisted to the top of the <template> block. Set this option to false to disable this behavior.

<script setup>
import MyComponent from './MyComponent.vue'
</script>

# Hello

Markdown content

<MyComponent/>

Will be converted to:

<script setup>
import MyComponent from './MyComponent.vue'
</script>

<template>
  <h1>Hello</h1>
  <p>Markdown content</p>
  <MyComponent />
</template>

TODOs

• Handles frontmatters
• rehype-vue-raw to replace rehype-raw with Vue-specific syntax (https://github.com/inikulin/parse5/issues/116)

Sponsors

License

MIT License © 2022 Anthony Fu