Vue Markdown

Vue Marked
Vue Markdown Wysiwyg
Vue Markdown-it

Vue-markdown-run example - GitHub Pages.
Vue-powered Static Site Generator. Using Vue in Markdown # Browser API Access Restrictions Because VuePress applications are server-rendered in Node.js when generating static builds, any Vue usage must conform to the universal code requirements.

Like how vue-loader makes.vue files possible, vue-markdown-loader makes.md work within Vue. In essence, markdowns can now be interpreted as a Vue component. To test this, within my components/.

frontmatter-markdown-loader allows you to import the compiled markdown body as Vue's render function, Vue component.

Those feature is enabled by Mode.VUE_COMPONENT, Mode.VUE_RENDER_FUNCTIONS in 'mode' option.

Additional dependencies

To use this mode, your project need to be installed some dependencies.

# After 3.0.0

In Vue CLI app, @vue/component-compiler-utils are installed. In Nuxt.js app, both are installed. So you may not install them explicitly.

# Until 2.3.0

# Import Vue Component (`Mode.VUE_COMPONENT`)

Mode.VUE_COMPONENT enables us to import Vue component from a markdown file.There are some ways to render/mount that.

TIP

Imported component is ready-made Vue component. We don't need to have Vue compiler on the fly.

# A. Mount imported markdown

# B. Import dynamically

Import a component based on dynamic variables, This may help you to build CMS, Blog...etc 😉

# C. Inject other components

If the compiled markdown has <sub-component-name> on body, that can run as Vue component if we register sub components. Our markdown may get special behaviors magically ✨

# Legacy: Import Vue Renderers (`Mode.VUE_RENDER_FUNCTIONS`)

render and staticRenderFns are necessary members of Vue's component internally. The loader can return these and we can call in the hand-made Vue component. Then you can inject components as sub-components. If the markdown body has the matching HTML tag to their name, Vue will run as Vue component 🧙‍♀️.

Not Recommended: This feature may be deprecated in the future 🤔

# After 3.0.0

Vue Marked

# Until 2.3.0

Vue Markdown Wysiwyg

vue.render and vue.staticRenderFns were just the string of the source.

Vue Markdown-it

# h1 Heading 8-)<h2> h2 Heading by HTML</h2>## h2 Heading### h3 Heading## Horizontal Rules___---***## Typographic replacementsEnable typographer option to see result.(c) (C) (r) (R) (tm) (TM) (p) (P) +-test.. test... test..... test?..... test!....!!!!!! ???? , -- ---'Smartypants, double quotes' and 'single quotes'## Emphasis**This is bold text**__This is bold text__*This is italic text*_This is italic text_~~Strikethrough~~## Blockquotes> Blockquotes can also be nested...>> ...by using additional greater-than signs right next to each other...> > > ...or with spaces between arrows.## ListsUnordered+ Create a list by starting a line with `+`, `-`, or `*`+ Sub-lists are made by indenting 2 spaces: - Marker character change forces new list start: * Ac tristique libero volutpat at + Facilisis in pretium nisl aliquet - Nulla volutpat aliquam velit+ Very easy!Ordered1. Lorem ipsum dolor sit amet2. Consectetur adipiscing elit3. Integer molestie lorem at massa1. You can use sequential numbers...1. ...or keep all the numbers as `1.`Start numbering with offset:57. foo1. bar## CodeInline `code`Indented code // Some comments line 1 of code line 2 of code line 3 of codeBlock code 'fences'```Sample text here...```Syntax highlighting``` javascriptvar foo = function (bar) { return bar++;};console.log(foo(5));`````` gopackage mainimport 'fmt'func main() { fmt.Println('Hello, world!')}```## Tables| Option | Description || ------ | ----------- || data | path to data files to supply the data that will be passed into templates. || engine | engine to be used for processing templates. Handlebars is the default. || ext | extension to be used for dest files. |Right aligned columns| Option | Description || ------:| -----------:|| data | path to data files to supply the data that will be passed into templates. || engine | engine to be used for processing templates. Handlebars is the default. || ext | extension to be used for dest files. |## Links[vue-markdown](https://github.com/miaolz123/vue-markdown)[link with title](https://github.com/miaolz123/vue-markdown 'VueMarkdown')Autoconverted link https://github.com/miaolz123/vue-markdown (enable linkify to see)## Images![Minion](dist/img/minion.png)Like links, Images also have a footnote style syntax![Alt text][id]With a reference later in the document defining the URL location:[id]: dist/img/minion.png 'The Dojocat'### Emojies> Classic markup: :wink: :cry: :laughing: :yum:>> Shortcuts (emoticons): :-) :-( 8-) ;)### Subscript / Superscript- 19^th^- H~2~O### <ins>++Inserted text++### <mark>Marked text### FootnotesFootnote 1 link[^first].Footnote 2 link[^second].Inline footnote^[Text of inline footnote] definition.Duplicated footnote reference[^second].[^first]: Footnote **can have markup** and multiple paragraphs.[^second]: Footnote text.### Definition listsTerm 1: Definition 1with lazy continuation.Term 2 with *inline markup*: Definition 2 { some code, part of Definition 2 } Third paragraph of definition 2._Compact style:_Term 1 ~ Definition 1Term 2 ~ Definition 2a ~ Definition 2b### AbbreviationsThis is HTML abbreviation example.It converts 'HTML', but keep intact partial entries like 'xxxHTMLyyy' and so on.*[HTML]: Hyper Text Markup Language

# After 3.0.0

# Until 2.3.0

# Import Vue Component (Mode.VUE_COMPONENT)

# A. Mount imported markdown

# B. Import dynamically

# C. Inject other components

# Legacy: Import Vue Renderers (Mode.VUE_RENDER_FUNCTIONS)

# After 3.0.0

Vue Marked

# Until 2.3.0

Vue Markdown Wysiwyg

Vue Markdown-it

# Import Vue Component (`Mode.VUE_COMPONENT`)

# Legacy: Import Vue Renderers (`Mode.VUE_RENDER_FUNCTIONS`)