vue-input-contenteditable

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>

This uses the standard @vue/cli export recommendations. You can import the source .vue component directly by importing vue-input-contenteditable/sfc or use the component from a script tag with unpkg.

For Enterprise

The maintainers of thousands of packages (including me! :3) are working with Tidelift to deliver commercial support and maintenance for the open source dependencies you use to build your applications. Save time, reduce risk, and improve code health, while paying the maintainers of the exact dependencies you use. Learn more.