vue-object

vue-object

Treat normal objects as vue components.

This library allows you to create an application using a plain objects that can render themselves. Perfect to proper encapsulation and widgets library. No external dependencies, works with vue as a rendering platform. See tests

Install:

npm install vue-object

Then add custom renderer and configure tsx

/// main.ts

import { Renderer } from 'vue-object';
Vue.use(Renderer);

/// shims-tsx.d.ts

import Vue, { VNode } from 'vue'

declare global {
  namespace JSX {
    // tslint:disable no-empty-interface
    interface Element { } // for now disable all type checks
    // tslint:disable no-empty-interface
    interface ElementClass { }
    interface IntrinsicElements {
      [elem: string]: any
    }
  }
}

And use plain classes instead of components

/// About.tsx

import { prop, event, slot, Handler } from "vue-object"

class Panel {
  slot: any;

  render() {
    return <div>
      Panel start
      {this.slot}
      Panel end
    </div>
  }
}

class Text {
  constructor(private text: string) {

  }
  render() {
    return <span> {this.text}</span>
  }
}

export class About {

  panel = new Panel();

  constructor() {
    // pass plain objects, that can render themselves
    this.panel.slot = new Text("Object content");
  }

  render(h: any) {
    return <div>
      <Panel>
        jsx panel content
        </Panel>
      {this.panel}
    </div>
  }
}

You can always convert classes to vue components using Convert utility. For example for VueRouter:

/// router.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import { Home } from '../views/Home'
import { About } from '../views/About'
import { Convert } from 'vue-object'

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Convert(Home)
  },
  {
    path: '/about',
    name: 'About',
    component: Convert(About)
  }
]