.This Vite plugin adds support for importing a Markdown file as a Vue part. Functions with Vue 2 & 3.Vue.js Demo Blocks.Render your Vue.js code blocks out inline through just including demonstration next to the language label.As an example, when this Markdown documents is actually rendered with this plugin, you'll see a clickable switch right here:."' vue trial.
Click me."'( end).Set up.npm install -D vite-vue-md.Create.In your vite.config.js documents:.Bring in vite-vue-md and also add it to the plugins selection.In your vue() plugin possibilities, include a feature alternative that includes.md files.vite.config.js:.bring in vue coming from '@vitejs/ plugin-vue'.+ import vueMd from 'vite-vue-md'.export nonpayment plugins: [// ...vue( + feature: [/. vue$/,/ . md$/]// u2190 Deal with MD files as Vue parts. ),.+ vueMd(/ * Options */)// u2190 Put together MD data to Vue elements.]// ...To compile a Vue.js codeblock as a Demo Block, include trial alongside the foreign language name:."' vue demo.
Click me."'( end).Multi-file demos.The access purpose for demo blocks have to be actually a Vue.js component. But you may import various other code shuts out in any type of foreign language coming from the exact same Markdown data.For non-entry documents, established a report title by means of demo=. After that import it from the Vue.js demonstration block by means of the doc: method:.
Click me.
Second documents:.demonstration= click-handler. js.export const clickHandler = () => alert(' Clicked on!').Trial + Code blocks out.Since the code blocks are provided inline, they're substituted by the true Vue.js element. To reveal the code block, you can easily add a onDemo callback to the plugin options:.( onDemo( componentTag, code) // Sign up the wrapper part.this.registerComponent(' DemoContainer', './ DemoContainer.vue').// Return a personalized HTML string.gain '.$ componentTag
$ this.escapeHtml( code)'. ).Alternatives.consist of.Style: ReadonlyArray|string|RegExp.Data to feature coming from being actually collected as Vue data.leave out.Kind: ReadonlyArray|string|RegExp.Files to exclude coming from being assembled as Vue files.markdownItOptions.Type: markdownIt.Options.MarkdownIt alternatives. Check out MarkdownIt's paperwork for more information.markdownItSetup.Type: (md: markdownIt) => void.Callback to add plugins to MarkdownIt.wrapperClass.Type: string.Default: markdown-body.The lesson to include in the wrapper component that contains the Markdown web page.onDemo.Kind:.(.tag: string,.code: cord,.trials: Map.) => strand.You can easily intercept each demonstration block as well as come back a customized HTML string. This is useful for including custom designing to demo blocks.Moreover, there are actually utils revealed in the this situation:.escapeHtml: Breaking away HTML code to avoid it from being rendered as HTML.registerComponent: Sign up a part to become used in the demonstration block. This works for enrolling parts that are imported from other reports.Observe example over in the Demo Blocks part.markdownCss.Type: chain.Submit pathway to a stylesheet to make use of for the Fall page. This will be added utilizing so it will only apply to the markdown webpage. Helpful for designating only the HTML produced due to the MarkdownIt plugin.useVOnce.Style: boolean.Whether to include v-once to the entire Markdown page. This will definitely avoid the Accounting allowance webpage from being actually re-rendered when the Vue element is actually updated.Precaution: This will certainly disable demonstration blocks. Merely use this if you possess a large file and also don't need to have demonstration blocks.Connected.unplugin-vue-markdown.Yet another Vite plugin for compiling Fall files to Vue elements.This plugin has drawn creativity from it but has a various attribute set. This plugin merely sustains Vue.js code in code blocks.Github.Scenery Github.