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

or

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.

License

MIT © Collin Henderson