Vuep: render components with editor and live preview
vue playground
Use this Vue component to render Vue components along with live editor and preview.
Example:
Installation
via Yarn
yarn add vuep codemirror
via NPM
npm i vuep codemirror -S
Need the full (compiler-included) build of Vue
webpack config
config/index.js
in project created via vue-cli, add this
resolve: {
alias: {
'vue$': 'vue/dist/vue.common'
}
main.js
import Vuep from 'vuep'
import 'vuep/dist/vuep.css'
Vue.component('Vuep', Vuep)
App.vue
<template>
<div class="container" id="app">
<img src="./assets/logo.png">
<hello></hello>
<vuep :options="{ mode: 'javascript' }" :template="code"></vuep>
</div>
</template>
For more information take a look at the documentation and visit the GitHub page.