Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/vue-styleguidist/vuepress-plugin-live
Make your markdown code examples come alive
https://github.com/vue-styleguidist/vuepress-plugin-live
examples live vue vuejs vuepress
Last synced: 3 months ago
JSON representation
Make your markdown code examples come alive
- Host: GitHub
- URL: https://github.com/vue-styleguidist/vuepress-plugin-live
- Owner: vue-styleguidist
- License: mit
- Created: 2019-05-11T21:17:02.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-03-28T17:39:27.000Z (11 months ago)
- Last Synced: 2024-05-01T15:55:24.705Z (10 months ago)
- Topics: examples, live, vue, vuejs, vuepress
- Language: JavaScript
- Homepage: http://vuepress-live.surge.sh/
- Size: 2.86 MB
- Stars: 38
- Watchers: 3
- Forks: 7
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vuepress-plugin-live
Make your markdown code examples come alive using [vue-live](https://github.com/vue-styleguidist/vue-live)
[](https://travis-ci.com/vue-styleguidist/vuepress-plugin-live)
[](https://www.npmjs.com/package/vuepress-plugin-live) [](https://www.npmjs.com/package/vuepress-plugin-live)
[](https://github.com/semantic-release/semantic-release)## 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
### layout
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") }],
],
};
```### noSsr
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 }]],
};
```### liveFilter
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);
},
},
],
],
};
```