@indielayer/vue-live-demo
v1.1.2
Published
A component for live editing Vue single file components in the browser with real time preview.
Downloads
869
Maintainers
Readme
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:
- Add this package to your dependencies
$ npm i @indielayer/vue-live-demo
# or
$ yarn add @indielayer/vue-live-demo
- 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