A Vue component wrapper for contenteditable

by Vue.js Examples

vue-input-contenteditable

The same features you expect from <input type="text"> but in a contenteditable Vue component.

Make beautiful inputs without the restrictions of input[type='text']. A Vue component wrapper for contenteditable with all the features you expect:

  • v-model
  • placeholder
  • maxlength

Installation

npm i vue-input-contenteditable

Usage

Below is an example of the component in use in a Single File Component. After importing it, make sure to add it to your components property and then it will be available in your template.

<template>
    <input-contenteditable
        v-model="myModel"
        is="p"
        :placeholder="myPlaceHolder"
        :maxlength="25" />
</template>

<script>
import InputContenteditable from 'vue-input-contenteditable';

export default {
    components: {
        'input-contenteditable': InputContenteditable
    },
    data: {
        myModel: '',
        myPlaceholder: 'Type your data here...'
    }
};
</script>

GitHub