Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qingwei-li/vuep
🎡 A component for rendering Vue components with live editor and preview.
https://github.com/qingwei-li/vuep
component editor playground preview vue vue-components
Last synced: 22 days ago
JSON representation
🎡 A component for rendering Vue components with live editor and preview.
- Host: GitHub
- URL: https://github.com/qingwei-li/vuep
- Owner: QingWei-Li
- License: mit
- Created: 2016-12-25T07:56:55.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-06T16:05:18.000Z (almost 2 years ago)
- Last Synced: 2024-04-13T16:33:14.560Z (7 months ago)
- Topics: component, editor, playground, preview, vue, vue-components
- Language: JavaScript
- Homepage: https://cinwell.com/vuep/
- Size: 1.05 MB
- Stars: 884
- Watchers: 29
- Forks: 103
- Open Issues: 40
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Vuep (vue playground)
[](https://travis-ci.org/QingWei-Li/vuep)
[](https://coveralls.io/github/QingWei-Li/vuep?branch=master)
[](https://www.npmjs.com/package/vuep)
> 🎡 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
```bash
yarn add vuep codemirror
# npm i vuep codemirror -S
```
### HTML tag
```html
```
## Quick start
**Need the full (compiler-included) build of Vue**
webpack config
```javascript
{
alias: {
'vue$': 'vue/dist/vue.common'
}
}
```
```javascript
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 = `
Hello, {{ name }}!
module.exports = {
data: function () {
return { name: 'Vue' }
}
}
`
}
})
```
### Usage A
```html
```
### Usage B
you can write in HTML file or even a markdown file.
```html
<template>
<div>Hello, {{ name }}!</div>
</template>
<script>
module.exports = {
data: function () {
return { name: 'Vue' }
}
}
```
### 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
```javascript
export default {
props: {
features: Array
},
template: `
Features
- {{ feature }}
`
}
```
- **app.js**: Application that needs to showcase Features component through Vuep
```javascript
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: `
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**:
```html
<div id="app">
<vuep :value="value" :scope="scope"></vuep>
</div>
```
## Inspired
- https://facebook.github.io/react/
- https://github.com/FormidableLabs/component-playground
## 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
```shell
yarn && yarn dev
# npm i && npm run dev
open test.html
```
## LICENSE
MIT