💖 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
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- 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