{"id":15287479,"url":"https://github.com/autonumeric/vue-autonumeric","last_synced_at":"2025-10-07T01:31:28.571Z","repository":{"id":16144304,"uuid":"79446349","full_name":"autoNumeric/vue-autoNumeric","owner":"autoNumeric","description":"A Vue.js component that wraps the awesome autoNumeric input formatter library","archived":false,"fork":false,"pushed_at":"2023-02-09T19:19:54.000Z","size":1364,"stargazers_count":92,"open_issues_count":42,"forks_count":26,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-16T03:14:34.940Z","etag":null,"topics":["autonumeric","awesome","component","vuejs"],"latest_commit_sha":null,"homepage":"http://autonumeric.org","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/autoNumeric.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-01-19T11:21:42.000Z","updated_at":"2024-12-20T04:23:07.000Z","dependencies_parsed_at":"2024-01-02T23:34:21.297Z","dependency_job_id":"f7234828-dd76-4182-bf8d-ce4903005ef7","html_url":"https://github.com/autoNumeric/vue-autoNumeric","commit_stats":{"total_commits":39,"total_committers":4,"mean_commits":9.75,"dds":"0.10256410256410253","last_synced_commit":"b7d70a4be5f1601c1c23b69ba4903f756b2b7686"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/autoNumeric%2Fvue-autoNumeric","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/autoNumeric%2Fvue-autoNumeric/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/autoNumeric%2Fvue-autoNumeric/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/autoNumeric%2Fvue-autoNumeric/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/autoNumeric","download_url":"https://codeload.github.com/autoNumeric/vue-autoNumeric/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":235575692,"owners_count":19012156,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autonumeric","awesome","component","vuejs"],"created_at":"2024-09-30T15:28:57.893Z","updated_at":"2025-10-07T01:31:23.252Z","avatar_url":"https://github.com/autoNumeric.png","language":"Vue","funding_links":["https://www.patreon.com/AlexandreBonneau)!"],"categories":[],"sub_categories":[],"readme":"## vue-autoNumeric\n\nA Vue.js component that wraps the awesome [AutoNumeric](https://github.com/autoNumeric/autoNumeric/) input formatter library\n\n[![NPM][nodei-image]][nodei-url]\n\u003cbr\u003e\n[![NPM version][npm-image]][npm-url]\n[![Downloads][downloads-image]][downloads-url]\n[![Known Vulnerabilities][snyk-image]][snyk-url]\n\u003cbr\u003e\u003cbr\u003e\nGet in touch on [![Gitter chat][gitter-image]][gitter-url]\n\n---\n\nvue-autoNumeric wraps the awesome AutoNumeric library and generate an `\u003cinput\u003e` element managed by [AutoNumeric](https://github.com/autoNumeric/autoNumeric/).\n\n**Checkout the [demo](https://codepen.io/AnotherLinuxUser/pen/pWgOrZ?editors=1010)!**\n\nAlternatively you can check the [examples](#examples) directly in your browser to see how to integrate the component with Vue and AutoNumeric.\n\n### Installation\n\n```sh\nyarn add vue-autonumeric\n# or\nnpm install vue-autonumeric --save\n```\n\n*Note: In order to minimize the size of the vue-autoNumeric component, the AutoNumeric library dependency **is not** bundled with it.*\n\nThis means you **need** to link the [AutoNumeric](https://github.com/autoNumeric/autoNumeric/) library with either ways:\n \n#### ...in your html `\u003chead\u003e` tag directly\n\n```html\n\u003c!-- locally... --\u003e\n\u003cscript src=\"../node_modules/autonumeric/dist/autonumeric.min.js\"\u003e\u003c/script\u003e\n\u003c!-- ...or by using a CDN --\u003e\n\u003cscript src=\"https://unpkg.com/autonumeric\"\u003e\u003c/script\u003e\n```\n\nThen you need to tell Webpack to treat the `AutoNumeric` dependency as [external](https://webpack.js.org/configuration/externals/) so that it does not try to bundle it.\u003cbr\u003eHere is a really simple `webpack.config.js` example that does that:\n\n```js\nmodule.exports = {\n    entry  : './src/vueAutonumericTest.js',\n    output : {\n        filename: './dist/bundle.js'\n    },\n    externals: {\n        autonumeric: 'AutoNumeric',\n    },\n};\n```\n\n#### ...or by importing it directly as an ES6 module\n\nYou can choose to directly import the AutoNumeric library in your source code.\u003cbr\u003eFirst, install the `autonumeric` dependency so that Webpack can find it using:\n\n```sh\nyarn add autonumeric\n# or\nnpm install autonumeric --save\n```\n\nYou will as usual be able to use the `vue-autonumeric` component in your Vue components using:\n```js\nimport VueAutonumeric from '../src/components/VueAutonumeric.vue';\n\nexport default {\n    name      : 'myComponent',\n\n    components: {\n        VueAutonumeric,\n    },\n}\n```\n\nHowever, 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.\n\nThe alias that you need to declare in your Webpack configuration:\n```js\nmodule.exports = {\n    entry  : './src/vueAutonumericTest.js',\n    output : {\n        filename: './dist/bundle.js'\n    },\n    resolve: {\n        alias: {\n            AutoNumeric: 'node_modules/autonumeric/dist/autoNumeric.min',\n        },\n    },\n};\n```\n\n### How to use?\n\nThe AutoNumeric component can be instantiated the same way `AutoNumeric` can.\n\nWith an option object:\n```html\n\u003cvue-autonumeric\n     v-model=\"myValue\"\n     :options=\"{\n         digitGroupSeparator: '.',\n         decimalCharacter: ',',\n         decimalCharacterAlternative: '.',\n         currencySymbol: '\\u00a0€',\n         currencySymbolPlacement: 's',\n         roundingMethod: 'U',\n         minimumValue: '0'\n     }\"\n\u003e\u003c/vue-autonumeric\u003e\n```\n\nWith a predefined option name:\n```html\n\u003cvue-autonumeric\n    v-model=\"myValue\"\n    :options=\"'French'\"\n\u003e\u003c/vue-autonumeric\u003e\n```\n\nWith multiple option objects/predefined options:\n```html\n\u003cvue-autonumeric\n    v-model=\"myValue\"\n    :options=\"['euro', { minimumValue: '0' }]\"\n\u003e\u003c/vue-autonumeric\u003e\n```\n\n#### Other props\n\n##### Placeholder\n\nYou can define the input placeholder using:\n```html\n\u003cvue-autonumeric\n    v-model=\"myValue\"\n    :options=\"'euro'\"\n    :placeholder=\"'Enter your value here'\"\n\u003e\u003c/vue-autonumeric\u003e\n```\n\n##### Tag\n\nYou can also specify the type of html tag (within the [AutoNumeric supported list](https://github.com/autoNumeric/autoNumeric/tree/next#on-other-dom-elements)) this component should generate using the `tag` prop.\nBy default, an `\u003cinput\u003e` element is generated, but if you want a `\u003cdiv\u003e` element, you can use:\n```html\n\u003cvue-autonumeric\n    v-model=\"myValue\"\n    options=\"euro\"\n    tag=\"div\"\n\u003e\u003c/vue-autonumeric\u003e\n```\n\n*Note: this will automatically set the `contenteditable` attribute to `true` for that generated element.*\n\n#### Integration with other scripts \u0026 events support\n\nThis wrapper supports setting the AutoNumeric options via an `:options` [prop](https://vuejs.org/v2/guide/components.html#Props).\u003cbr\u003e\n**It also supports external value changes** (via `aNElement.set(42)` for instance) and update the formatting *and* the [`v-model`](https://vuejs.org/v2/guide/components.html#Customizing-Component-v-model) accordingly.\n\nThe `paste`, `drop` and `wheel` events are supported as well.\n\nMoreover, if you modify the `:options` prop, the AutoNumeric settings will be automatically updated with the new options. \n\n### Caveats\n\nPlease note that directly setting a `:value='42'` on the `\u003cvue-autonumeric\u003e` component **will break it** (really!).\u003cbr\u003e\nDo **NOT** do that:\n```html\n\u003cvue-autonumeric\n    v-model=\"myValue\"\n    :options=\"{ minimumValue: '0' }\"\n    :value=\"42042.69\" \u003c!-- This fails --\u003e\n\u003e\u003c/vue-autonumeric\u003e\n```\n\n### Demo\n\nThe official AutoNumeric [documentation](http://autonumeric.org/#/guide) is using this component extensively :)\u003cbr\u003e\n\u003cbr\u003e\nAn editable live example is available [on Codepen](https://codepen.io/AnotherLinuxUser/pen/pWgOrZ?editors=1010).\n\n#### Examples\n\nYou can also check the [shipped examples](https://github.com/autoNumeric/vue-autoNumeric/blob/master/examples/index.html) in your browser, and study their [source here](https://github.com/autoNumeric/vue-autoNumeric/tree/master/examples-src).\u003cbr\u003eTo do so, first compile the example using:\n```bash\n# this will build the component *and* the examples\nyarn build \n```\nThen check the resulting html file in your browser using:\n```bash\nfirefox ./examples/index.html # or `chrome`\n```\n\n### Requirements\n\n- [AutoNumeric](https://github.com/autoNumeric/autoNumeric) `^v4`\n- [Vue.js](https://github.com/vuejs/vue) `^v2`\n\n### Browser support\n\nThis supports the same browsers than AutoNumeric supports:\n- Firefox and\n- Chrome\n\n*(latest 2 versions)*\u003cbr\u003e\u003cbr\u003e\nIf you use IE/Edge/Safari/Opera, this *might* work ;)\n\n### Contributing\n\nWhenever you change the source code, you can check how it affects the default examples by first building those in `examples/index.html` with:\n```sh\nyarn build:examples\n```\n\nThe [contribution guidelines](https://github.com/autoNumeric/autoNumeric/blob/next/doc/CONTRIBUTING.md) for vue-autoNumeric are the same than for the parent [AutoNumeric](https://github.com/autoNumeric/autoNumeric) project.\n\n### Support\n\nAs always, if you find this useful, please consider [supporting its development](https://www.patreon.com/AlexandreBonneau)!\u003cbr\u003e\nHuge Thanks :)\n\n### License\n\n`vue-autoNumeric` is open-source and released under the [MIT License](https://github.com/autoNumeric/vue-autoNumeric/blob/master/LICENSE).\n\n\u003cbr\u003eCopyright © 2016-2018 Alexandre Bonneau\n\n\u003e PS:\u003cbr\u003e\nI would love to know how you're using vue-autonumeric.\u003cbr\u003e\nContact and tell me! :)\n\n\n[downloads-image]: http://img.shields.io/npm/dm/vue-autonumeric.svg\n[downloads-url]: http://badge.fury.io/js/vue-autonumeric\n[gitter-image]: https://img.shields.io/badge/gitter-autoNumeric%2FautoNumeric-brightgreen.svg\n[gitter-url]: https://gitter.im/autoNumeric/vue-autoNumeric\n[npm-image]: https://img.shields.io/npm/v/vue-autonumeric.svg\n[npm-url]: https://npmjs.org/package/vue-autonumeric\n[nodei-image]: https://nodei.co/npm/vue-autonumeric.png?downloads=true\u0026downloadRank=true\u0026stars=true\n[nodei-url]: https://nodei.co/npm/vue-autonumeric\n[snyk-image]: https://snyk.io/test/github/autoNumeric/vue-autoNumeric/badge.svg\n[snyk-url]: https://snyk.io/test/github/autoNumeric/vue-autoNumeric\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautonumeric%2Fvue-autonumeric","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fautonumeric%2Fvue-autonumeric","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fautonumeric%2Fvue-autonumeric/lists"}