Vuep: render components with editor and live preview

vue playground

Use this Vue component to render Vue components along with live editor and preview.



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'


import Vuep from 'vuep'
import 'vuep/dist/vuep.css'

Vue.component('Vuep', Vuep)


  <div class="container" id="app">
    <img src="./assets/logo.png">
    <vuep :options="{ mode: 'javascript' }" :template="code"></vuep>

For more information take a look at the documentation and visit the GitHub page.