Vue 3 Development with the PrimeVue Framework — Input Mask and Numeric Inputs

PrimeVue is a UI framework that’s compatible with Vue 3.

In this article, we’ll look at how to get started with developing Vue 3 apps with PrimeVue.

Input Mask

A PrimeVue input mask can be specified with the following parts:

• a — Alpha character (A-Z,a-z)
• 9 — Numeric character (0–9)
• * — Alphanumeric character (A-Z,a-z,0–9)

We can specify the placeholders for the input mask with tyhe slotChar prop:

<template>
  <div>
    <InputMask v-model="value" mask="99/99/9999" slotChar="mm/dd/yyyy" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

slotChar ‘s value is displayed as the placeholder.

We can specify optional values with the question mark:

<template>
  <div>
    <InputMask v-model="value" mask="(999) 999-9999? x99999" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

Numeric Input

PrimeVue’s InputNumber component renders as a numeric input.

To add it, we write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import InputNumber from 'primevue/inputnumber';
import 'primevue/resources/primevue.min.css'
import 'primevue/resources/themes/saga-blue/theme.css'
import 'primeicons/primeicons.css'
import 'primeflex/primeflex.css';

const app = createApp(App);
app.use(PrimeVue);
app.component("InputNumber", InputNumber);
app.mount("#app");

App.vue

<template>
  <div>
    <InputNumber v-model="value" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

We can only enter numbers into InputNumber components.

Also, we can set the mode prop to let us enter decimal numbers:

<template>
  <div>
    <InputNumber
      v-model="value"
      mode="decimal"
      :minFractionDigits="2"
      :maxFractionDigits="2"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

We add the minFractionDigits and maxFractionDigits props to let us specify the number of decimal digits we can enter.

The locale prop lets us change the format of the number according to the locale:

<template>
  <div>
    <InputNumber v-model="value" locale="en-IN" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

We can also specify the currency with the currency prop:

<template>
  <div>
    <InputNumber v-model="value" currency="EUR" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

Also, we can attach a prefix or suffix with the prefix and suffix props:

<template>
  <div>
    <InputNumber v-model="value" prefix="Expires in " suffix=" days" />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

We can also add buttons as addons for the numeric input with several props:

<template>
  <div>
    <InputNumber
      v-model="value"
      showButtons
      buttonLayout="horizontal"
      decrementButtonClass="p-button-danger"
      incrementButtonClass="p-button-success"
      incrementButtonIcon="pi pi-plus"
      decrementButtonIcon="pi pi-minus"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      value: "",
    };
  },
  methods: {},
};
</script>

showButtons lets us show the buttons.

Then we set the classes and icons for the increase and decrease buttons.

Conclusion

We can add input masks and numeric inputs into our Vue 3 app with PrimeVue.