Nullstack Vueable

Making Nullstack framework able to read Vue basic template syntax

Installation

Run this command on your Nullstack project:

npm install nullstack-vueable -D

or, using Yarn:

yarn add nullstack-vueable -D

Then import it in your index.js file (as shown here in tests/index.js):

Then import it in your client.js/server.js files (as shown here in tests/client.js):

importvueablefrom'nullstack-vueable';Nullstack.use(vueable);

Examples

All of this can be seen being used on tests folder

v-for

array=[25,1,{data: {data2: 10}},{data: {data2: 20}}];renderVFor(){return(<><spanv-for={'item in '+JSON.stringify(this.array)}>
item.data.data2
</span><buttononclick={{array: [...this.array, ...this.array]}}>
Double array
</button></>)}

v-if

showTitle=true;renderVif(){return(<><h1v-if="showTitle"source={this}>
Element to be hidden
</h1><buttononclick={{showTitle: !this.showTitle}}>
Toggle title
</button></>)}

v-html

boldTitle(){return`<b>${this.title}</b>`;}renderVhtml(){return(<h1v-html="boldTitle"source={this}></h1>)}

v-model

title='Nullstack';renderVModel(){return(<inputtype="text"v-model="title"source={this}/>)}

Use of it all in the render function

render(){return(<><Vif/><Vhtml/><VFor/><VModel/></>)}