Have ideas to improve npm?Join in the discussion! »

    vue-cleave-component

    3.0.1 • Public • Published

    Vue Cleave Component

    downloads npm-version github-tag license build codecov

    Vue.js component for Cleave.js

    Demo on JSFiddle

    Version matrix

    Vue.js version Package version Branch
    2.x 2.x 2.x
    3.x 3.x master

    Features

    • Reactive v-model value
      • You can change input value programmatically
    • Reactive options
      • You can change config options dynamically
      • Component will watch for any changes and redraw itself
    • Compatible with Bootstrap, Bulma or any other CSS framework
    • Works with validation libraries
    • Option to disable raw mode to get masked value

    Installation

    # yarn
    yarn add vue-cleave-component
    
    # npm
    npm install vue-cleave-component --save

    Usage

    <template>
        <div>
            <cleave v-model="cardNumber"
                    :options="options"
                    class="form-control"
                    name="card"/>
        </div>
    </template>
    
    <script>
        import Cleave from 'vue-cleave-component';
    
        export default {
            data() {
                return {
                    cardNumber: null,
                    options: {
                        creditCard: true,
                        delimiter: '-',
                    }
                }
            },
            components: {
                Cleave
            }
        }
    </script>

    As plugin

      import {createApp} from 'vue';
    import Cleave from 'vue-cleave-component';
    // your app initilization logic goes here
    const app = createApp({}).mount('#app')
    app.use(Cleave);

    This will register a global component <cleave>

    Available props

    The component accepts these props:

    Attribute Type Default Description
    v-model String / Number / null null Set or Get input value (required)
    options Object {} Cleave.js options
    raw Boolean true When set to false; emits formatted value with format pattern and delimiter

    Install in non-module environments (without webpack)

    • Include required files
    <!-- cleave.js -->
    <script src="https://cdn.jsdelivr.net/npm/cleave.js@1"></script>
    <!-- Vue.js -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
    <!-- Lastly add this package -->
    <script src="https://cdn.jsdelivr.net/npm/vue-cleave-component@3"></script>
    <script>
        // Init as global component
        app.use(VueCleave);
    </script>

    Run examples on your localhost

    • Clone this repo
    • You should have node-js >=12.13 and yarn >=1.22 pre-installed
    • Install dependencies yarn install
    • Run webpack dev server yarn start
    • This should open the demo page at http://localhost:9000 in your default web browser

    Testing

    • This package is using Jest and vue-test-utils for testing.
    • Tests can be found in __test__ folder
    • Execute tests with this command yarn test

    Changelog

    Please see CHANGELOG for more information what has changed recently.

    License

    MIT License

    Install

    npm i vue-cleave-component

    DownloadsWeekly Downloads

    14,428

    Version

    3.0.1

    License

    MIT

    Unpacked Size

    22.5 kB

    Total Files

    8

    Last publish

    Collaborators

    • avatar