🎑 A component for rendering Vue components with live editor and preview.
JavaScript HTML CSS
Latest commit 8fe8540 Dec 30, 2016 @QingWei-Li Fix docs
Permalink
Failed to load latest commit information.
__test__ fix test Dec 27, 2016
build Build commonjs from index.cjs.js Dec 26, 2016
dist bump 0.3.0 Dec 27, 2016
docs Fix docs Dec 30, 2016
src Fix style & yarn.lock Dec 27, 2016
.babelrc Add unit tests Dec 27, 2016
.eslintrc Add unit tests Dec 27, 2016
.gitignore Add unit tests Dec 27, 2016
.travis.yml use yarn Dec 27, 2016
LICENSE first commit Dec 25, 2016
README.md Fix docs Dec 30, 2016
package.json -> v0.3.0 Dec 27, 2016
test.html Add unit tests Dec 27, 2016
yarn.lock Fix style & yarn.lock Dec 27, 2016

README.md

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>
        export default {
          data: function () {
            return { name: 'Vue' }
          }
        }
      </script>
    `
  }
})

Usage A

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

Usage B

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

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

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

  <script>
    export default {
      data: function () {
        return { name: 'Vue' }
      }
    }
  </script>
</script>

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