Skip to content
The same features you expect from `<input type="text">` but in a `contenteditable` Vue component
JavaScript Vue
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
media
src
tests
.browserslistrc
.editorconfig
.eslintrc.js
.gitignore
.npmignore
.travis.yml
LICENSE.txt
README.md
babel.config.js
package-lock.json
package.json
postcss.config.js

README.md

build status twitter twitter twitter Tidelift - For Enterprise

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"
        :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.

Developing

Testing

npm run serve #Runs tests/dev/main.js
npm run test:unit
npm run test:unit -- --watch
npm run lint
...

Releasing

npm run build
npm publish
You can’t perform that action at this time.