vuepress-plugin-live

Make your markdown code examples come alive using vue-live

 

Install

``sh
yarn add -D vuepress-plugin-live


or with npm: npm install -D vuepress-plugin-live


`

Config

`js
//.vuepress/config.js
module.exports = {
//...
plugins: [["live"]],
};
`

Usage

In your markdown file just add a live flag to your fenced code blocks.

`vue live
<button>example</button>
`

Options

$3

Path to a custom layout for the vue-live instances

#### default

vuepress-plugin-live/layout.vue

#### example

`js
//.vuepress/config.js
module.exports = {
//...
plugins: [
["live", { layout: path.resolve(__dirname, "../VueLiveLayout.vue") }],
],
};
`

$3

Avoid server side rendering the components in components if they are not ssr ready. Remember that vuepress build pre-compiles the html pages you need.

#### default

false

#### example

`js
//.vuepress/config.js
module.exports = {
//...
plugins: [["live", { noSsr: true }]],
};
`

$3

Allows users of theis plugin to say what fenced blocks will be rendered with vue-live.

#### default

`js
(lang) => / live$/.test(lang) && / live /.test(lang);
`

#### example

`js
//.vuepress/config.js
module.exports = {
//...
plugins: [
[
"live",
{
liveFilter(lang) {
return ["vue", "js", "jsx"].includes(lang);
},
},
],
],
};
``