vue3-cleave-component

https://github.com/ankurk91/vue-cleave-component

by Ankur Kumar

HTML

<link rel="stylesheet" href="https://unpkg.com/bootstrap@4/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<script src="https://cdn.jsdelivr.net/npm/cleave.js@1"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-cleave-component@3"></script>
<main id="app" class="card card-body">
  <h3>
    Vue3 cleave example
  </h3>
  <div class="form-group">
    <label>Enter credit card</label>
    <cleave type="tel" v-model="form.cardNumber" class="form-control" :options="options.creditCard"></cleave>
    <small class="form-text text-muted">{{form.cardNumber}}</small>
  </div>

  <div class="form-group">
    <label>Enter date with <code>:raw="false"</code></label>
    <cleave v-model="form.date" class="form-control" :raw="false" :options="options.date" placeholder="dd/mm/yyyy"></cleave>
    <small class="form-text text-muted">{{form.date}}</small>
  </div>
  <div class="form-group">
    <label>Currency</label>
    <cleave v-model="form.number" class="form-control" :options="options.number"></cleave>
    <small class="form-text text-muted">{{form.number}}</small>
  </div>
  <div class="text-center">
    <a target="_blank" href="https://github.com/ankurk91/vue-cleave-component">Read more</a>
  </div>
</main>

CSS

body {
  font-family: Verdana, 'Arial', sans-sarif;
}

JavaScript

var app = Vue.createApp({
  data() {
    return {
      form: {
        cardNumber: null,
        date: null,
        number: 123456,
      },
      options: {
        creditCard: {
          creditCard: true,
          delimiter: '-',
        },
        date: {
          date: true,
          datePattern: ['d', 'm', 'Y'],
          delimiter: '/',
        },
        number: {
          prefix: '$ ',
          numeral: true,
          numeralPositiveOnly: true,
          noImmediatePrefix: true,
          rawValueTrimPrefix: true,
          numeralIntegerScale: 9,
          numeralDecimalScale: 2
        },
      }
    }
  },
});
app.use(VueCleave);
app.mount("#app")