vue-input-autowidth

A Vue.js directive that automatically resizes an input's width to fit its contents.

🚦 Looking for Vue 2 support? Check out the master branch.

See demo

Installation

npm install vue-input-autowidth@next --save
# or...
yarn add vue-input-autowidth@next

Use the UMD build from Unpkg, available as VueInputAutowidth in the global scope.

<script src="/vendor/vue.js" />
<script src="https://unpkg.com/vue-input-autowidth@next" />

Usage

Globally

Import and register the directive in your app's entrypoint.

import { createApp } from 'vue'
import App from './App.vue'
import { plugin as VueInputAutowidth } from 'vue-input-autowidth'

createApp(App).use(VueInputAutowidth).mount('#app')

Per-component

<script>
import { directive as VueInputAutowidth } from "vue-input-autowidth"

export default {
  directives: { autowidth: VueInputAutowidth },
  setup() {
    ...
  },
}
</script>

...and in your template:

<template>
  <input type="text" placeholder="First Name" v-model="msg" v-autowidth />
</template>

You can also pass some options:

<template>
  <input
    type="text"
    placeholder="First Name"
    v-model="msg"
    v-autowidth="{
      minWidth: '75px',
      maxWidth: '75%',
      comfortZone: '1ch',
    }"
  />
</template>

Available Options

Name	Type	Default Value	Description
maxWidth	`string`	`undefined`	Sets the `max-width` CSS property on the element. The value should be a valid CSS size and unit.
minWidth	`string`	`undefined`	Sets the `min-width` CSS property on the element. The value should be a valid CSS size and unit.
comfortZone	`string`	`0px`	Uses CSS `calc()` to add the specificied amount to the calculated width. The value should be a valid CSS size and unit.
watchWindowSize	`boolean`	`false`	When enabled, the directive will listen to the window resize event, and resize the input if needed.
windowResizeHandlerDebounceTime	`number`	`150`	The debounce time in milliseconds for the window resize event. Only applies if `watchWindowSize` is `true`.
disableNonInputWarning	`boolean`	`false`	Disables the console warning if you try and use the directive on a non-input element.

syropian/vue-input-autowidth