JSFiddle - React, Tailwind, and code Playground

by Renoir Boulanger

HTML

<div id="app">
  <h1>Change title</h1>
  <label for="foo">
    Define a big pink title this input:
  </label>
  <input type="text" v-model="title" id="foo" placeholder="Hello Worl11d!" />
  <button @click="title='Yo!'">
      Write "Yo!"
  </button>
  <button @click="title=null">
      Reset
  </button>
  <hr/>
  <h1>
    Using Vue.compile
  </h1>
  <block-with-title :title="title">
    Hey this is contents flowing from within, it is called a slot.
  </block-with-title>
  <hr/>
  <h1>
    Using raw render function
  </h1>
  <render-function-variant :title="title">
    render-function-variant slot contents
  </render-function-variant>
  <hr/>
  <h1>
    Show "title" value through capitalize filter (`title|capitalize`)
  </h1>
  <span>{{title|capitalize}}</span>
  <div>
    <ul>
      <li
        v-for="(row, index) in rows"
        :key="index"
      >
        <strong>{{row.name}}</strong>
        <small>{{row.age}}</small>
      </li>
    </ul>
  </div>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h1 {
  font-size: 1.2em;
}

.hotpink {
  color: hotpink;
}
h2 {
  font-size: 1.9em;
  color: hotpink;
}

JavaScript 1.7

window.compiled = compiled = [{name: 'block-with-title', dfn: Object.assign({}, Vue.compile('<div><h2>{{title}}</h2><slot>Slot contents</slot></div>'))}]

compiled.push({
  name: 'render-function-variant',
  dfn: {
    props: {
      title: {
        type: String,
        default: 'Hello World'
      }
    },
    render: function (createElement) {
      // https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
      return createElement(
        'div',
        {
          attrs: {
            title: this.title + '!!!1',
          },
        },
        [
          createElement('h2', this.title),
          this.$slots.default,
        ]
      )
    }
  }
})

Vue.component(compiled[0].name, {
  // template: '<div><h2>{{title}}</h2><slot>Slot contents</slot></div>',
  render: compiled[0].dfn.render,
  staticRenderFns: compiled[0].dfn.staticRenderFns,
  props: {
    title: {
      type: String,
      default: 'Hello World'
    },
  }
})

Vue.component(compiled[1].name, compiled[1].dfn)

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.toUpperCase()
})






















window.rootVue = new Vue({
  el: "#app",
  data: {
    title: null,
    rows: [
      {
      	name: 'Steak',
        fat: 39
      },
      {
      	name: 'Corn',
        fat: 30
      },
      {
      	name: 'Potato',
        fat: 34
      },
     ],
    rows: [
      {
      	name: 'Steak',
        fat: 39
      },
      {
      	name: 'Corn',
        fat: 30
      },
      {
      	name: 'Potato',
        fat: 34
      },
    ]
  },
})

console.log(`Vue initialized,\ncompiled[0].fn.render.toString() is:\n\n`, compiled[0].fn.render.toString())