Vue Autosizer

A light (2.2kB) and dependency-free replacement for built-in <textarea> and <input> elements allowing them to automatically stretch to fit the content.

Demo

Edit on JSFiddle

Install

npm

npm install vue-autosizer

yarn

yarn add vue-autosizer

How to use

Global Registration

You can import and register the plugin in the entry point of your application like so:

import VueAutosizer from 'vue-autosizer'
import 'vue-autosizer/dist/vue-autosizer.min.css'

Vue.use(VueAutosizer)

Then use it like any other component:

// Input that grows in width
<autosize-input v-model="" />

// Textarea that grows in height
<autosize-textarea v-model="" />

Local Registration

<template>
    <autosize-input v-model="" />

    <autosize-textarea v-model="" />
</template>

<script>
import { AutosizeInput, AutosizeTextarea } from 'vue-autosizer'

export default {
    components: { AutosizeInput, AutosizeTextarea }
}
</script>

<style src="vue-autosizer/dist/vue-autosizer.min.css"/>

Contribution

If you have any reasonable PR you are welcome.

License

MIT