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.