Vue-input-autowidth NPM

vue-input-autowidth

A Vue.js directive for adjusting a text input's width to fit its content.

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" />

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>