💖 Using webpack? You may want vmark-loader ➡️

vmark

Install

yarn add vmark

Usage

In:

---
components:
  counter: ./components/counter.vue
---
# Show off some counter

<counter :start="0" />

Out:

import counter from './components/counter.vue'

export default {
  render: function render(h) {
    return h('div', {staticClass: 'vmark'}, [
      h('h1', {attrs: {id: '..'}}, ['Show off some counter']),
      h('counter', {attrs: {start: 0}})
    ])
  },
  components: {
    counter: counter
  }
}

Code:

const { component, attributes } = vmark(input)

// component: generated component string
// attributes: parsed front-matter

front-matter

components

Specify required components so that we can inject import statements into final code.

---
components
  counter: ./components/counter.vue
---

data

Specify data option for the component:

---
data:
  count: 0
---
{{ count }}

styles

Inject import statements for CSS files:

---
styles:
  - ./foo.css
---

API

vmark(input, [options])

input

Type: string
Required: true

Input markdown string.

options

options.wrap

Type: function
Default: template => '<div class="vmark">' + template + '</div>'

Wrap template in a div, since Vue doesn't allow multiple root nodes.

options.prettier

Type: boolean
Default: true

Prettier output.

Contributing

1. Fork it!
2. Create your feature branch: git checkout -b my-new-feature
3. Commit your changes: git commit -am 'Add some feature'
4. Push to the branch: git push origin my-new-feature
5. Submit a pull request :D

Author

vmark © egoist, Released under the MIT License.
Authored and maintained by egoist with help from contributors (list).

github.com/egoist · GitHub @egoist · Twitter @_egoistlily