GuiDevloper/nullstack-vueable

:green_heart: Making Nullstack framework able to read Vue basic template syntax

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):

import vueable from '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 (
    <>
      <span v-for={'item in ' + JSON.stringify(this.array)}>
        item.data.data2
      </span>
      <button onclick={{array: [...this.array, ...this.array]}}>
        Double array
      </button>
    </>
  )
}

v-if

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

v-html

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

v-model

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

Use of it all in the render function

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