Feature request: expose 'createElement' under 'Vue' object.

[SeanJM]

Feature request

This one is simple, expose 'createElement' on the Vue object, so that h can be omitted from the render function. So that when JSX is typed, we can lower the error margin, by excluding one step.

[yyx990803]

1. The createElement passed to render functions are bound to the instance being rendered. This is required for Vue vnodes to have correct render context.
2. If exposed on global Vue, you'd need to do import Vue from 'vue' in every component, which is in fact more verbose.

[SeanJM]

Maybe I am trying to hard to make it similar to React...

[rusintez]

Have a use case for it: trying to implement React's styled-components, but can't pass event handlers, since they are bound to parent instance T_T. Would love to be able to do:

const Title = styled.h1`
  color: red;
  font-size: 32px;
`;

<template>
   <Title id="welcome-message" @click="doStuff">Hi from vue-styled-components!</Title>
</template>

So far i have

/**
 * Style vuejs components
 */

import insertCss from 'insert-css';
import hash from 'short-hash';
import tags from 'html-tags';
import Vue from 'vue';

/**
 * Cache duplicated styles
 */

const cache = new Set();

/**
 * Get tag name, like 'a' or 'div' and return a function that accepts styling for it.
 *
 * @param {String} element, valid html tag name
 * @return {Function} style(str)
 */

function styled (tagName) {
  return ([style]) => {
    const className = `s${hash(style)}`;

    if (!cache.has(className)) {
      insertCss(`.${className} { ${style} }`);
      cache.add(className);
    }

    return {
      render (createElement) {
        return createElement(tagName, { attrs: { class: className } }, this.$slots.default);
      }
    };
  }
}

/**
 * Syntactic sugar
 *
 * can call `styled.h1` instead of `styled('h1')`
 */

tags.forEach((tag) => {
  styled[tag] = styled(tag);
});

/**
 * Expose
 */

export default styled;

[yyx990803]

@rusintez you can get the listeners in context.data.on (where context is the second argument to stateless render functions)

[rusintez]

@yyx990803 !!! 👍 completely forgot about that, thanks )

[haan123]

I don't know if this is valid or not, but it works for me

// In my Nuxt plugin modal.js 

import Vue from 'vue'
import Modal from '~/components/Modal'
import Logo from '~/components/Logo'

Vue.prototype.$modal = {
  open(params) {
    ...

    const ModalComponent = Vue.extend(Modal)
    const modal = new ModalComponent({
      ...
    })

    modal.$slots.header = modal.$createElement(Logo) // here i used vm.$createElement to create the logo for modal's header

    return modal
  }
}