A Vue.js Directive That Content-based Automatic Input Resizing

Vue input autowidth is a Vue.js directive that automatically resizes the input width to fit its contents.

increase input box size dynamically, auto expand input width based on text length, input width auto resize css, auto resize textarea to fit content, input width fit content

Table of Contents

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-input-autowidth

# NPM
$ npm install vue-input-autowidth --save

Install it with package managers.

# Yarn
$ yarn add vue-input-autowidth

# NPM
$ npm install vue-input-autowidth --save

Import “vue-input-autowidth”.

import VueInputAutowidth from 'vue-input-autowidth'

Enable the plug-in.

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 assumptions.

{

  // max width in pixels
  maxWidth: "none", 

  // min width in pixels
  minWidth: "none", 

  // additional space in pixels
  comfortZone: 0
  
}