vue-live-demo

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #ai #typescript #llm #go #golang #android #machine-learning #rust #deep-learning #linux

★ 12 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

> Building digital products and empowering online companies

<br/>

# Vue Live Demo - SFC Editor

[![npm (scoped with tag)](https://flat.badgen.net/npm/v/@indielayer/vue-live-demo)](https://npmjs.com/package/@indielayer/vue-live-demo)
[![npm](https://flat.badgen.net/npm/dt/@indielayer/vue-live-demo)](https://npmjs.com/package/@indielayer/vue-live-demo)

Vue Live Demo used on Indielayer

DEMO - [https://indielayer.github.io/vue-live-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

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

2. Usage:

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

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

</div>
</template>

// 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](https://github.com/indielayer/vue-live-demo/blob/master/LICENSE) - Indielayer

vue-live-demo

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README