intact-vue

intact-vue

A compatibility layer for running Intact component in Vue-Next.

Usage

import {createApp} from 'vue';
import {Component} from 'intact-vue';

class IntactComponent extends Component {
    static template = `
        <button ev-click={this.onClick.bind(this)}>
            click {this.get('value')}
        </button>
    `;

    onClick() {
        this.set('value', this.get('value') + 1);
        this.trigger('click');
    }
}

const container = document.createElement('div');
document.body.appendChild(container);
createApp({
    data: {
        count: 0,
    },
    template: `<div>
        <IntactComponent @click="onClick" v-model="count"/>
        <div>count: {{ count }}</div>
    </div>`,
    methods: {
        onClick() {
            console.log(this.count);
        }
    },
    components: {IntactComponent}
}).mount(container);

webpack

You can use alias config of webpack to replace intact module.

resolve: {
    alias: {
        'intact$': 'intact-vue'
    }
}

Incompatible

1. .native modifier is not supported. For example:

   // native modifier
   <IntactComponent @click.native="onClick" />
   

2. Multiple values style is not supported.