@nohyou/v-trim

Vue 3 directive for trimming input values on blur, supports native input and UI library components like el-input.

Installation

npm install @nohyou/v-trim

Usage

Global Registration

import { createApp } from 'vue';
import App from './App.vue';
import { install as vTrimInstall } from '@nohyou/v-trim';

const app = createApp(App);
app.use(vTrimInstall);
app.mount('#app');

Local Registration

import { defineComponent } from 'vue';
import vTrim from '@nohyou/v-trim';

export default defineComponent({
  directives: {
    trim: vTrim
  }
});

Template Usage

Native Input

<template>
  <input v-trim v-model="value" placeholder="Enter text" />
</template>

Element Plus Input

<template>
  <el-input v-trim v-model="value" placeholder="Enter text" />
</template>

Other UI Library Inputs

The directive automatically finds the input element inside the component, so it should work with most UI library input components.

How It Works

• When the input element loses focus (blur event), the directive trims the value
• It updates both the input's value and triggers an input event to ensure two-way binding works correctly
• It supports both native input elements and wrapped input components like el-input

License

ISC