Vue-vnode-helper NPM

vue-vnode-helper

Helpers for Vue's createElement inspired by hyperscript-helpers.

Example

// component.js
import { tag, helpers, apply } from 'vue-vnode-helper'
const { article, h1, p } = helpers // Get element helpers you want to use

import OtherComponent from './other-component'

export default {
  props: ['message'],

  render(createElement) {
    // Apply createElement to vue-vnode-helper
    // and you can use more terse syntax for the render.
    return apply(createElement,

      // Allow css selector for the 1st argument.
      // the 2nd argument expects vdom data
      // the 3rd argument expects children
      // same as Vue's createElement.
      // All arguments can be omitted.
      article('#content', [
        h1('.title', 'This is page title'),
        p('.message', { props: { title: this.message } }, this.message),

        // use Vue component by tag helper
        tag('other-component', { props: 'some value' })
      ])
    )
  },

  components: {
    OtherComponent
  }
}

API Reference

helpers: { [key: string]: (selector?: string, data?: VNodeData, children?: VNodeChildren): VNodeThunk }
Built-in helpers. All HTML5 elements and special elements of Vue.js are available. The helpers generates VNodeThunk that must be transformed by apply function.
tag(tag?: string | Component, selector?: string, data?: VNodeData, children?: VNodeChildren): VNodeThunk
A fallback helper that can be specified any element/component name or component options object/constructor.
apply(createElement: CreateElement, thunk: VNodeThunk): VNode
Transform VNodeThunk to actual VNode.

createHelper(tag?: string | Component): (selector?: string, data?: VNodeData, children: VNodeChildren) => VNodeThunk

Create a new vnode helper.

// Some Vue component
const MyComp = {
  props: ['message'],
  template: '<div>{{ message }}'
}

// Create MyComp helper
const myComp = createHelper(MyComp)

// Use MyComp helper in another component
render (h) {
  return apply(h,
    div('.wrapper', [
      myComp({ props: { message: this.value }})
    ]
  ))
}