koca / vue-live

A component to demo components, inspired by react-live

vue-live

A lightweight playground for live editing VueJs code in the browser

---

Usage

The simplest way to render components is as a VueJs template:

<template>
    <VueLive :code="`<date-picker />`" :components="{ DatePicker }" @error="(e) => handleError(e)">
</template>

<script>
import { VueLive } from "vue-live";
import DatePicker from "vuejs-datepicker"

export default {
    components: { VueLive },
    data(){
        return {
            // make DatePicker available in template
            DatePicker
        }
    }
}
</script>

Check out the demo for alternative syntaxes to write your showcases.

How to contribute

npm ci

Compiles and hot-reloads for development

npm run start

Compiles and minifies library for production using rollup

npm run build

Run unit and e2e tests

npm run test:unit
npm run test:e2e

Lints and fixes files

npm run lint