vue-input-autowidth

Install

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

Add The Plugin

Globally

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

import { directive as VueInputAutowidth } from 'vue-input-autowidth'

export default {
  directives: { autowidth: VueInputAutowidth },
  setup() {
    ...
  },
}

Add the directive to a text input

<input
  type="text"
  placeholder="Watch me change size with my content!"
  v-model="msg"
  v-autowidth
/>

Configure

You can pass various options to the directive

<input
  type="text"
  placeholder="An example with custom options"
  v-model="msg"
  v-autowidth="{
    minWidth: '75px',
    maxWidth: '86%',
    comfortZone: '1ch',
    watchWindowSize: true,
  }"
/>