Vue 3 Development with the PrimeVue Framework — Rich Text Editor Toolbar, Input Groups, and Input Masks

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.

Rich Text Editor Toolbar Configuration

We can change the configuration of PrimeVue’s rich text editor’s toolbar by populating the toolbar slot:

<template>
  <div>
    <Editor v-model="value" editorStyle="height: 320px">
      <template #toolbar>
        <span class="ql-formats">
          <button class="ql-bold"></button>
          <button class="ql-italic"></button>
          <button class="ql-underline"></button>
        </span>
      </template>
    </Editor>
  </div>
</template>

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

We add buttons to let us set the text styles in the editor.

Input Group

We can add input groups by adding some classes provided by the PrimeVue framework.

For instance, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import InputText from 'primevue/inputtext';
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("InputText", InputText);
app.mount("#app");

App.vue

<template>
  <div>
    <div class="p-col-12 p-md-4">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <i class="pi pi-user"></i>
        </span>
        <InputText placeholder="Username" />
      </div>
    </div>
  </div>
</template>

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

We register the InputText component in main.js .

Then we add the p-inputgroup class to make the div an input group container.

The p-inputgroup-addon class lets us attach items to the input group’s input.

We can also add it to the right side:

<template>
  <div>
    <div class="p-col-12 p-md-4">
      <div class="p-inputgroup">
        <InputText placeholder="Username" />
        <span class="p-inputgroup-addon">
          <i class="pi pi-user"></i>
        </span>
      </div>
    </div>
  </div>
</template>

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

We can also add a checkbox as an input group addon by writing:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import InputText from 'primevue/inputtext';
import Checkbox from 'primevue/checkbox';
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("InputText", InputText);
app.component("Checkbox", Checkbox);
app.mount("#app");

App.vue

<template>
  <div>
    <div class="p-col-12 p-md-4">
      <div class="p-inputgroup">
        <span class="p-inputgroup-addon">
          <Checkbox v-model="checked" binary />
        </span>
        <InputText placeholder="Username" />
      </div>
    </div>
  </div>
</template>

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

We add the Checkbox into the span with the p-inputgroup-addon class.

Input Mask

PrimeVue comes with the InputMask component to let us add an input mask into our Vue 3 app.

For example, we can write:

main.js

import { createApp } from "vue";
import App from "./App.vue";
import PrimeVue from "primevue/config";
import InputMask from 'primevue/inputmask';
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("InputMask", InputMask);
app.mount("#app");

App.vue

<template>
  <div>
    <InputMask v-model="value" mask="a*-999-a999" />
  </div>
</template>

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

to register and add the InputMask component.

The mask prop specifies the format that the input can accept.

We bind the entered value to the value reactive property with v-model .

Conclusion

We can add a rich text editor with a custom toolbar, input groups and input masks with PrimeVue.