[UPDATED] Create a contenteditable element with Vue.js

Make a vue.js model working with the contenteditable HTML attribute.

Created on September 2017

[UPDATED] Create a contenteditable element with Vue.js

The contenteditable attribute is a powerful resource if you don't want to use inputs, textareas or other fields to allow the live editing of a text, but it doesn't work with our dear friend v-model.

So... What is the solution? The best way is to create a custom component, called editable, which will trigger an event when the content will update.

The code is very simple:

Vue.component('editable', {
    template: `<div contenteditable="true" @input="$emit('update:content', $event.target.innerText)"></div>`,
    props: ['content'],
    mounted: function () {
        this.$el.innerText = this.content;
    watch: {
        content: function () {
            this.$el.innerText = this.content;

Then in your HTML template we recall it like this:

<editable :content.sync="myText"></editable>

You can, of course, use any HTML attribute on your <editable> tag, like class, id etc.

Live demo


In the template field, we generate a <div> contenteditable. Then, with the @input event, we catch every update of its content to sync the Vue.js data.

When the component mount, it gets the value of the content attribute to set the initial text.

Thank to the watch, we make sure that external updates of content will affect also our contenteditable.


How to deploy a Node.js app with Ansible, Git and pm2


Improve your Go development with GOsc