.This Vite plugin includes assistance for importing a Markdown report as a Vue element. Performs along with Vue 2 & 3.Vue.js Trial Blocks.Provide your Vue.js code blocks inline through merely including demonstration alongside the foreign language title.For instance, when this Fall documents is provided with this plugin, you'll observe a clickable switch here:."' vue demonstration.
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 choices, include a feature option that includes.md data.vite.config.js:.bring in vue from '@vitejs/ plugin-vue'.+ import vueMd coming from 'vite-vue-md'.export nonpayment plugins: [// ...vue( + consist of: [/. vue$/,/ . md$/]// u2190 Handle MD files as Vue parts. ),.+ vueMd(/ * Options */)// u2190 Organize MD documents to Vue parts.]// ...To put together a Vue.js codeblock as a Demo Block, add trial next to the language label:."' vue demo.
Click me."'( end).Multi-file demos.The entry objective for demonstration blocks must be actually a Vue.js element. Yet you may import other code blocks in any sort of foreign language from the same Accounting allowance report.For non-entry data, placed a file title using demo=. At that point bring in it coming from the Vue.js demo block by means of the doctor: method:.
Click me.
2nd file:.trial= click-handler. js.export const clickHandler = () => sharp(' Clicked!').Trial + Code shuts out.Given that the code blocks are provided inline, they are actually switched out by the real Vue.js element. To reveal the code block, you can easily add a onDemo callback to the plugin choices:.( onDemo( componentTag, code) // Register the wrapper element.this.registerComponent(' DemoContainer', './ DemoContainer.vue').// Return a custom HTML string.yield '.$ componentTag
$ this.escapeHtml( code)'. ).Choices.include.Kind: ReadonlyArray|string|RegExp.Files to feature coming from being actually organized as Vue files.leave out.Type: ReadonlyArray|chain|RegExp.Reports to leave out coming from being organized as Vue documents.markdownItOptions.Kind: markdownIt.Options.MarkdownIt options. See MarkdownIt's records for additional information.markdownItSetup.Style: (md: markdownIt) => void.Callback to incorporate plugins to MarkdownIt.wrapperClass.Type: cord.Default: markdown-body.The course to include in the cover element that contains the Accounting allowance webpage.onDemo.Type:.(.tag: string,.code: cord,.demos: Chart.) => string.You can obstruct each trial block and return a customized HTML cord. This serves for incorporating personalized designing to trial blocks.Moreover, there are actually utils subjected in the this context:.escapeHtml: Retreat HTML code to stop it from being actually made as HTML.registerComponent: Register an element to be utilized in the demonstration block. This serves for enrolling parts that are imported from other data.Observe example over in the Trial Blocks segment.markdownCss.Type: string.File path to a stylesheet to use for the Accounting allowance page. This will be actually included using so it is going to just relate to the fall web page. Beneficial for designating only the HTML produced by the MarkdownIt plugin.useVOnce.Kind: boolean.Whether to include v-once to the whole entire Fall page. This will certainly prevent the Markdown webpage from being actually re-rendered when the Vue component is actually upgraded.Alert: This are going to turn off trial blocks. Simply utilize this if you possess a big record and also don't require demo blocks.Related.unplugin-vue-markdown.One more Vite plugin for organizing Accounting allowance files to Vue parts.This plugin has attracted motivation from it but possesses a different attribute collection. This plugin merely supports Vue.js code in code blocks.Github.View Github.