Vue Component Base Native Element Example

Input.vue

<script>
    export default {
      name: 'UInput',
      render () {
        // TODO: abstract node render useful function.
        const attrs = this.$attrs;
        const on = Object.keys(this.$listeners).reduce((events, key) => {
          events[key] = (ev) => {
            this.$emit(key, ev);
          };
          return events;
        }, {});
        const directives = { attrs, on };
        return (
          <div class="u-input">
            <label>
              <input class="u-input-inner" {...directives} />
            </label>
          </div>
        );
      }
    };
</script>