@emmanuelbett/vue-number-input v1.0.1

Vue Number Input

A Vue 3 component that formats numbers with commas as you type.

Installation

npm install @emmanuelbett/vue-number-input

------------------------------------------------------------------------------------------
🚀 Usage

<script setup>
import { ref } from 'vue';
import { NumberInput } from 'vue-number-input';
// Optional: import custom styles if included in your build
// import 'vue-number-input/dist/style.css';

const amount = ref("");
</script>

<template>
  <NumberInput v-model="amount" label="Amount" />
</template>
🔧 Props

Prop	Type	Description
v-model	String | Number	The bound input value
label	String	Label for the input field
rules	Array	Vuetify-style validation rules (optional)

-----------------------------------------------------------------------------------------
📤 Events

Event	Description
update:modelValue	Emitted with the unformatted number value

------------------------------------------------------------------------------------------
🧠 Example Rule Usage

const rules = [
  v => !!v || "Required",
  v => parseFloat(v.replace(/,/g, '')) <= 100000 || "Too large"
];

-------------------------------------------------------------------------------------------
💡 Features
Formats numbers with commas (1,000,000)

Maintains cursor position while typing

Supports decimal values

Validates using Vuetify's rules system

--------------------------------------------------------------------------------------------
✅ Requirements
Vue 3

Vuetify 3

📄 License
MIT

👤 Author
Made with ❤️ by Emmanuel Bett