Compatibility with Vue.js 2.0

Is vue-html-editor compatible with Vue.js 2.0? I’m using Vue.js 2.0 and I’m getting the following error:

[Vue warn]: Failed to mount component: template or render function not defined. (found in component <vue-html-editor>)

[ninmesara]

I ended up forking it and making a private version with more customization options. My version uses single file components (in order to be compatible with the new version of vuejs’s default runtime) and uses the v-model directive, which is the standard way of handling input in vuejs 2.0. I’ll submit a pull request when I have the time.

[renatoneri]

If someone wants, works in v2:

<script>
export default {
    data() {
        return {
            isChanging: false,
            control: null,
            text: ''
        }
    },
    replace: true,
    inherit: false,
    template: '<textarea v-model="text" class="form-control" :name="name"></textarea>',
    props: {
        value: {
            required: false
        },
        language: {
            type: String,
            required: false,
            default: 'en-US'
        },
        height: {
            type: Number,
            required: false,
            default: 160
        },
        minHeight: {
            type: Number,
            required: false,
            default: 160
        },
        maxHeight: {
            type: Number,
            required: false,
            default: 800
        },
        name: {
            type: String,
            required: false,
            default: ''
        },
        toolbar: {
            type: Array,
            required: false,
            default() {
                return [
                    ['font', ['bold', 'italic', 'underline', 'clear']],
                    ['fontsize', ['fontsize']],
                    ['para', ['ul', 'ol', 'paragraph']],
                    ['color', ['color']],
                    ['insert', ['link', 'picture', 'hr']]
                ];
            }
        }
    },
    watch: {
        text(val) {
            this.$emit('input', val)
        },
        value(newVal) {
            this.text = newVal;
            if (this.minHeight > this.height) {
                this.minHeight = this.height;
            }
            if (this.maxHeight < this.height) {
                this.maxHeight = this.height;
            }

            var that = this;

            this.control =  $(this.$el);
            this.control.summernote({
                lang: this.language,
                height: this.height,
                minHeight: this.minHeight,
                maxHeight: this.maxHeight,
                toolbar: this.toolbar,
                callbacks: {
                    onInit: function() {
                        that.control.summernote('code', that.text);
                    }
                }
            }).on('summernote.change', function() {
                if (!that.isChanging) {
                    that.isChanging = true;
                    var code = that.control.summernote('code');
                    that.text = (code === null || code.length === 0 ? null : code);
                    that.$nextTick(function() {
                        that.isChanging = false;
                    });
                }
            });
        }
    }
};
</script>

Html:

<summernote v-model="form.texto"></summernote>