Have ideas to improve npm?Join in the discussion! »

    cloud-vuep

    0.8.1 • Public • Published

    Vuep (vue playground)

    Build Status Coverage Status npm

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

    image

    Links

    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: `
    <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>`
          }
        }
      })
    • app template:
    <div id="app">
      <vuep :value="value" :scope="scope"></vuep>
    </div>

    Inspired

    Contributing

    • Fork it!
    • Create your feature branch: git checkout -b my-new-feature
    • Commit your changes: git commit -am 'Add some feature'
    • Push to the branch: git push origin my-new-feature
    • Submit a pull request :D

    Development

    yarn && yarn dev
    # npm i && npm run dev 
    open test.html

    LICENSE

    MIT

    Install

    npm i cloud-vuep

    DownloadsWeekly Downloads

    2

    Version

    0.8.1

    License

    MIT

    Unpacked Size

    972 kB

    Total Files

    40

    Last publish

    Collaborators

    • avatar