🎡 A component for rendering Vue components with live editor and preview.
- Docs: https://cinwell.com/vuep/
- An online playgound: https://vuep.netlify.com
yarn add vuep codemirror
# npm i vuep codemirror -S<!-- 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>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>
`
}
})<div id="app">
<vuep :template="code"></vuep>
</div>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>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>- 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
yarn && yarn dev
# npm i && npm run dev
open test.htmlMIT