Vue Templates Logo Vue Templates
Vue AutoNumeric screenshot

Vue AutoNumeric

Author Avatar Theme by Autonumeric
Updated: 9 Feb 2023
92 Stars

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

Github Live Preview

Categories

Scss

Overview:

The vue-autoNumeric is a Vue.js component that wraps the AutoNumeric input formatter library. It allows for easy integration of AutoNumeric functionality into Vue.js applications. It provides an <input> element managed by AutoNumeric, allowing for formatting and handling of numeric input.

Features:

  • Wraps the AutoNumeric library for easy integration with Vue.js
  • Supports various AutoNumeric options for formatting and handling input
  • Can be instantiated with option objects or predefined options
  • Supports setting the input placeholder and specifying the html tag (default is <input>)
  • Integration with other scripts and events support, including paste, drop, and wheel events
  • Automatic update of AutoNumeric settings when modifying the :options prop
  • Official AutoNumeric documentation and live example available

Installation:

To install the vue-autoNumeric component, you need to link the AutoNumeric library. There are two ways to link the library:

  1. Link the AutoNumeric library in the <head> tag of your html file.
  2. Import the AutoNumeric library as an ES6 module in your source code.

After linking the AutoNumeric library, you can install the vue-autoNumeric component and use it in your Vue components.

If you choose to directly import the AutoNumeric library, you need to define an alias for the library in your Webpack config to avoid any conflicts.

Summary:

The vue-autoNumeric component is a convenient wrapper for integrating the AutoNumeric input formatter library with Vue.js. It allows for easy installation and usage, providing various options for formatting and handling numeric input. The component supports integration with other scripts and events, and the AutoNumeric settings can be automatically updated when modifying the options. This component is extensively used in the official AutoNumeric documentation and a live example is available for demonstration.