indielayer/vue-live-demo

A component for live editing Vue single file components in the browser with real time preview.

Building digital products and empowering online companies

Vue Live Demo - SFC Editor

Vue Live Demo used on Indielayer

DEMO - https://indielayer.github.io/vue-live-demo/

Getting Started

Do you want to add to your own projects? There you go:

1. Add this package to your dependencies

$ npm i @indielayer/vue-live-demo
# or
$ yarn add @indielayer/vue-live-demo

2. Usage:

<template>
  <div style="padding-top: 100px">

    <vue-live-demo
      :code="code"
      :show-code="showCode"
      :components="components"
    />

  </div>
</template>

<script>
import VueLiveDemo from '@indielayer/vue-live-demo'

// Components you wish to add on the demo
// import RandomComponent from './RandomComponent.vue'

export default {
  components: {
    VueLiveDemo
  },
  data() {
    return {
      // components you wish to add on the demo
      components: {
        // RandomComponent,
      },
      code: `<template><div>hello</div></template>`,
      showCode: true
    }
  }
}
</script>

Missing features - TODO

• import other scripts in the Single File Component

License

MIT license - Indielayer