vue-autoNumeric

A Vue.js component that wraps the awesome AutoNumeric input formatter library.

This fork makes it compatible with Vue 3, given that today the original repo does not support Vue 3.

[![NPM][nodei-image]][nodei-url]


[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][downloads-url]
[![Known Vulnerabilities][snyk-image]][snyk-url]



Get in touch on [![Gitter chat][gitter-image]][gitter-url]

---

vue-autoNumeric wraps the awesome AutoNumeric library and generate an element managed by AutoNumeric.

Checkout the demo!

Alternatively you can check the examples directly in your browser to see how to integrate the component with Vue and AutoNumeric.

$3

``sh
yarn add vue-autonumeric


or

This means you need to link the AutoNumeric library with either ways:

#### ...in your html tag directly

`html




`

Then you need to tell Webpack to treat the AutoNumeric dependency as external so that it does not try to bundle it.
Here is a really simple webpack.config.js example that does that:

`js
module.exports = {
entry : './src/vueAutonumericTest.js',
output : {
filename: './dist/bundle.js'
},
externals: {
autonumeric: 'AutoNumeric',
},
};
`

#### ...or by importing it directly as an ES6 module

You can choose to directly import the AutoNumeric library in your source code.
First, install the autonumeric dependency so that Webpack can find it using:

`sh
yarn add autonumeric


or

You will as usual be able to use the vue-autonumeric component in your Vue components using:
`js
import VueAutonumeric from '../src/components/VueAutonumeric.vue';

export default {
name : 'myComponent',

components: {
VueAutonumeric,
},
}
`

However, when doing that if you want to be able to bundle all the scripts together with Webpack, you'll need to define an alias for the AutoNumeric library in your Webpack config, otherwise Webpack will complain about the npm package autonumeric case.

The alias that you need to declare in your Webpack configuration:
`js
module.exports = {
entry : './src/vueAutonumericTest.js',
output : {
filename: './dist/bundle.js'
},
resolve: {
alias: {
AutoNumeric: 'node_modules/autonumeric/dist/autoNumeric.min',
},
},
};
`

$3

The AutoNumeric component can be instantiated the same way AutoNumeric can.

With an option object:
`html
v-model="myValue"
:options="{
digitGroupSeparator: '.',
decimalCharacter: ',',
decimalCharacterAlternative: '.',
currencySymbol: '\u00a0€',
currencySymbolPlacement: 's',
roundingMethod: 'U',
minimumValue: '0'
}"
>
`

With a predefined option name:
`html
v-model="myValue"
:options="'French'"
>
`

With multiple option objects/predefined options:
`html
v-model="myValue"
:options="['euro', { minimumValue: '0' }]"
>
`

#### Other props

##### Placeholder

You can define the input placeholder using:
`html
v-model="myValue"
:options="'euro'"
:placeholder="'Enter your value here'"
>
`

##### Tag

You can also specify the type of html tag (within the AutoNumeric supported list) this component should generate using the tag prop.
By default, an element is generated, but if you want a