Vuep plus

A component for rendering Vue components with live editor and preview.

Version: 0.8.1 Updated: 04/11/2018

By: QingWei-Li License: MIT

Downloads Last 30 Days: 20

Install

npm i vuep-plus
yarn add vuep-plus

Repository: https://github.com/QingWei-Li/vuep

CDNs

bundle.run: https://bundle.run/vuep-plus

jsDelivr: https://cdn.jsdelivr.net/npm/vuep-plus

unpkg: https://unpkg.com/vuep-plus

Vuep (vue playground)

Build Status Coverage Status npm

🎡 A component for rendering Vue components with live editor and preview.

image

Try it!

https://qingwei-li.github.io/vuep/

Installation

Yarn

yarn add vuep codemirror
# npm i vuep codemirror -S

HTML tag

<!-- Import theme -->
<link rel="stylesheet" href="//unpkg.com/vuep/dist/vuep.css">

<!-- depend vue -->
<script src="//unpkg.com/vue"></script>
<script src="//unpkg.com/vuep"></script>

Quick start

Need the full (compiler-included) build of Vue

webpack config

{
  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>
    `
  }
})

Usage A

<div id="app">
  <vuep :template="code"></vuep>
</div>

Usage B

you can write in HTML file or even a markdown file.

<div id="app">
  <vuep template="#example"></vuep>
</div>

<script v-pre type="text/x-template" id="example">
  <template>
    <div>Hello, {{ name }}!</div>
  </template>

  <script>
    module.exports = {
      data: function () {
        return { name: 'Vue' }
      }
    }
  </script>
</script>

Scope

You can customize scope by passing an object to the scope property.

This object can contain component available in main scope to include them into Vuep.

  • features.js: Component to showcase into Vuep

    export default {
    props: {
      features: Array
    },
    template: `<div class="features">
    <h3>Features</h3>
    <ul>
    <li v-for="feature in features">{{ feature }}</li>
    </ul>
    </div>`
    }
  • app.js: Application that needs to showcase Features component through Vuep

    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: `