vue-number-format

A lightweight flexible Vue.js 2 and 3 component to display and input formatted numbers and currencies

Docs and Demo

1. Install

Install npm module:

``bash
yarn add vue-number-format
or
npm i -S vue-number-format
`

2. Install globally

$3

`js
import { createApp } from 'vue'
import App from './App.vue'
import VueNumberFormat from 'vue-number-format'

const app = createApp(App)
app.use(VueNumberFormat, {prefix: 'US$ ', decimal: ',', thousand: '.'})

app.mount('#app')
`

$3


`js
// plugins/index.ts
import VueNumberFormat from '@igortrindade/vue-number-format'

export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(VueNumberFormat, { prefix: 'R$ ', decimal: '.', thounsand: ',' })
})
`


$3

`js
import Vue from 'vue'
import App from './App.vue'

import VueNumberFormat from 'vue-number-format'
Vue.use(VueNumberFormat, {prefix: 'R$ ', decimal: ',', thousand: '.'})

new Vue({
render: h => h(App),
}).$mount('#app')
`

3. Use the component:

`html

v-model:value="value"
:options="{ precision: 3, prefix: '', suffix: ' kg', decimal: '', thousand: '', acceptNegative: false, isInteger: false }"
>



v-model="value"
:options="{ precision: 3, prefix: '', suffix: ' kg', decimal: '', thousand: '', acceptNegative: false, isInteger: false }"
>
`

3.1. Use only to display

`html
{{vueNumberFormat(275, {})}}




`

$3

This is the default package options, feel free to change for anything you need
`js
{
prefix: 'US$ ',
suffix: '',
decimal: ',',
thousand: '.',
precision: 2,
acceptNegative: true,
isInteger: false
}
`




Built With

* Vue

Test functional (using Japa Tests)

`bash
npm run test
``

Author

Igor Trindade - Developer*
* github.com/igortrinidad
* https://igortrindade.dev
Highly inspired by* v-money

License

This project is licensed under the MIT License - see the LICENSE file for details.

Changelog

- v1.1.0
- Initial release.
- Added Jest - tests
- Added tests for format and unformat functions
- Added vue-test-unit tests for component tests coverage

- v.1.3.0
- Added support to Nuxt 3