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: 2 days 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 (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-03-28T17:39:27.000Z (8 months ago)
• Last Synced: 2024-05-01T15:55:24.705Z (7 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)

[![Build Status](https://travis-ci.com/vue-styleguidist/vuepress-plugin-live.svg?branch=master)](https://travis-ci.com/vue-styleguidist/vuepress-plugin-live)

[![NPM Version](https://img.shields.io/npm/v/vuepress-plugin-live.svg)](https://www.npmjs.com/package/vuepress-plugin-live) [![NPM Downloads](https://img.shields.io/npm/dm/vuepress-plugin-live.svg)](https://www.npmjs.com/package/vuepress-plugin-live)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](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);

        },

      },

    ],

  ],

};

```