Intact

// @file layout.vdt
<div>
    <header>
        <b:header>Extendable and Reactive Component</b:header>
    </header>
    <div>
        <b:body>
            <div class="count">{self.get("count")}</div>
        </b:body>
    </div>
</div>

// @file layout.js
import Intact from 'intact';
import template from './layout.vdt';

export default class Layout extends Intact {
    @Intact.template()
    static template = template;

    defaults() {
        return {count: 0};
    }
}

// @file page.vdt
<t:parent>
    <b:body>
        {parent()}
        <button class="button"
            ev-click={self.add}
        >Click me!</button>
    </b:body>
</t:parent>

// @file page.js
import Intact from 'intact';
import template from './page.vdt';
import Layout from './layout';

export default class Page extends Layout {
    @Intact.template()
    static template = template;

    add() {
        this.set('count', this.get('count') + 1);
    }
}


Intact.mount(Page, document.getElementById('app'));