QingWei-Li / Vuep
Licence: mit
🎡 A component for rendering Vue components with live editor and preview.
Stars: ✭ 840
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Vuep
Mint Ui
Mobile UI elements for Vue.js
Stars: ✭ 16,471 (+1860.83%)
Mutual labels: component, vue-components
For Editor
for-editor - A markdown editor based on React
Stars: ✭ 358 (-57.38%)
Mutual labels: editor, component
Componentfixture
🛠️Interactive sandox playground for vue components
Stars: ✭ 44 (-94.76%)
Mutual labels: playground, component
Vuesax
New Framework Components for Vue.js 2
Stars: ✭ 5,293 (+530.12%)
Mutual labels: component, vue-components
Liquor Tree
Tree component based on Vue.js
Stars: ✭ 348 (-58.57%)
Mutual labels: component, vue-components
Albumcamerarecorder
一个高效的多媒体支持操作库,可多方面的简单配置操作相册、拍照、录制、录音等功能。也支持配套使用的展示图片、视频、音频的九宫格功能。 (An efficient multimedia support operation library, can be a variety of simple configuration operation album, photo, recording, recording and other functions.Also support supporting the use of the display of pictures, video, audio of the nine grid function.)
Stars: ✭ 106 (-87.38%)
Mutual labels: editor, preview
Vue Swatches
🎨 Help the user picking beautiful colors!
Stars: ✭ 456 (-45.71%)
Mutual labels: component, vue-components
Kkfileviewofficeedit
文件在线预览及OFFICE(word,excel,ppt)的在线编辑
Stars: ✭ 234 (-72.14%)
Mutual labels: editor, preview
Graphql Editor
📺 Visual Editor & GraphQL IDE. Draw GraphQL schemas using visual 🔷 nodes and explore GraphQL API with beautiful UI. Even 🐒 can do that!
Stars: ✭ 5,485 (+552.98%)
Mutual labels: playground, editor
Vue Tinymce Editor
This a component provides use of tinymce for vue developers
Stars: ✭ 216 (-74.29%)
Mutual labels: editor, component
Godoc Playground
Play with GoDoc syntax and preview your changes in realtime
Stars: ✭ 104 (-87.62%)
Mutual labels: playground, preview
Tagger
Zero Dependency, Vanilla JavaScript Tag Editor
Stars: ✭ 135 (-83.93%)
Mutual labels: editor, component
React Markdown
Markdown editor (input) based on React
Stars: ✭ 98 (-88.33%)
Mutual labels: editor, component
Object Editor React
Schema-aware editor for structured JSON objects (drop-in React component)
Stars: ✭ 104 (-87.62%)
Mutual labels: editor, component
Vue Prism Editor
A dead simple code editor with syntax highlighting and line numbers. 3kb/gz
Stars: ✭ 422 (-49.76%)
Mutual labels: editor, component
React Markdown Editor Lite
a light-weight Markdown editor based on React. 一款轻量的基于React的markdown编辑器
Stars: ✭ 553 (-34.17%)
Mutual labels: editor, component
Vuep (vue playground)
🎡 A component for rendering Vue components with live editor and preview.
Links
- Docs: https://cinwell.com/vuep/
- An online playgound: https://vuep.netlify.com
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].