Vuep (vue playground)

{
  alias: {
    'vue$': 'vue/dist/vue.common'
  }
}

import Vue from 'vue'
import Vuep from 'vuep'
import 'vuep/dist/vuep.css'
 
Vue.use(Vuep /*, { codemirror options } */)
// or Vue.component('Vuep', Vuep)
 
new Vue({
  el: '#app',
 
  created: function () {
    this.code = `
      <template>
        <div>Hello, {{ name }}!</div>
      </template>
 
      <script>
        module.exports = {
          data: function () {
            return { name: 'Vue' }
          }
        }
      </script>
    `
  }
})

export default {
  props: {
    features: Array
  },
  template: `<div class="features">
<h3>Features</h3>
<ul>
  <li v-for="feature in features">{{ feature }}</li>
</ul>
</div>`
}

import Vue from 'vue'
 
import Features from 'features' // Import component
 
new Vue({
  el: '#app',
  data: function () {
    return {
      scope: { Features }, // Set the scope of vuep
      value: `
<template>
  <div>
    <features :features="features"></features>
  </div>
</template>
 
<script>
  export default {
    components: {
      Features // This variable is available through scope and can be used to register component
    },
    data () {
      return {
        features: [
          'Vue Single File Component support',
          'Scoped style',
          'UMD and CommonJS build',
          'Define JavaScript scope'
        ]
      }
    }
  }<\/script>`
      }
    }
  })