Vue-hyper
Prototyping extremely dynamic interfaces. Programming html without directly using html
Install
# Using npm $ npm install --save vue-hyper # Using yarn $ yarn add vue-hyper
Import
el: '#app' name: 'hello' { return schema: Schema } template: '<VueHyper :schema="schema"/>' components: VueHyper
Schema
The scheme is a direct bridge that leads directly to the creation of native components of vues. Therefore, properties follow the style of VueJS names, such as click
, change
, input
... The same applies to attributes: title
, class
, placeholder
, value
, innerHtml
...
// filename: schema.js// dir: examples/schema.js moduleexports = root: type: 'form' method: 'post' name: type: 'input' properties: title: 'Name' class: 'form-control' tooltip: 'Input your first name' value: 'Julian' innerHtml: 'hello' placeholder: '' events: { console } { console } { console } { console } lastname: type: 'input' properties: title: 'lastname' tooltip: 'Input your first lastname' value: 'David' events: { console } description: type: 'input' properties: title: 'biografy' tooltip: 'Here your text' placeholder: 'Text' events: { console } genre: type: 'select' properties: title: 'genre' tooltip: 'Input your genre' value: 'M' 'F' 'Other' events: { console } { console }
See example schema.js
The rendered elements look like this:
Events
Prop | Description |
---|---|
click |
Custom class to add to the component |
change |
Custom url that the component will load |
input |
Custom text |
See full list of events
Development, Build Setup
# install dependenciesnpm install# serve with hot reload at localhost:8080npm run dev# build for production with minificationnpm run build# build for production and view the bundle analyzer reportnpm run build --report# run unit testsnpm run unit# run e2e testsnpm run e2e# run all testsnpm test
License
MIT @juliandavidmr