Auto Resize Input In Vue.js – autosize-input

Install & Download:

# Yarn
$ yarn add vue-autosize-input
# NPM
$ npm install vue-autosize-input --save

Description:

A small yet sometimes useful Vue.js component to auto-resize text fields depending on the content length of what you typed.

How to use it:

1. Import the autosize-input component.

import AutosizeInput from 'vue-autosize-input';

2. Add an auto-resize input to the app template.

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

3. Register the component and done.

export default {
  components: {
    AutosizeInput,
  },
  data () {
    return {
      value: '',
    }
  }
}

4. Execute a callback when the input value changes.

<template>
  <autosize-input
    v-model="value"
    @change="onChange />
</template>

export default {
  components: {
    AutosizeInput,
  },
  data () {
    return {
      value: '',
    }
  },
  methods: {
    onChange (e) {
      // do something with e.target.value
    },
  },
}

Preview:

Changelog:

v0.1.1 (12/07/2021)

• feat: update lib