Auto Resize Input Based On Content - vue-input-autowidth

Install & Download:

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

The vue-input-autowidth allows to dynamically adjust the width of your input field depending on the length of content.

Install it with package managers.

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

Import the ‘vue-input-autowidth’.

import VueInputAutowidth from 'vue-input-autowidth'

Enable the plugin.

Vue.use(VueInputAutowidth)

Apply the plugin to your input field.

<input
  type="text"
  v-autowidth="{maxWidth: '960px', minWidth: '20px', comfortZone: 0}"
  v-model="name"
  placeholder="Type something here."
/>

Options and defaults.

{
  // max width in pixels
  maxWidth: "none", 
  // min width in pixels
  minWidth: "none", 
  // additional space in pixels
  comfortZone: 0
  
}

v1.0.11 (03/07/2021)