/ VueJS

[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

See the Pen NaRdyZ by Danilo (@DaniloPolani) on CodePen.


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.

Danilo Polani

Danilo Polani

Software Engineer and dreamer in startups. Go, Python, Laravel, Ionic, AngularJS, VueJS, NodeJS, JavaScript, Elasticsearch, Redis.

Read More