Vue 3 Development with the PrimeVue Framework — Checkbox, Chips Input, and Color Picker

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.

Checkbox

We can add a checkbox by writing:

main.js

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

App.vue

<template>
  <div class="card">
    <div class="p-field-checkbox">
      <Checkbox name="city1" value="Miami" v-model="cities" />
      <label> Miami</label>
    </div>
    <div class="p-field-checkbox">
      <Checkbox name="city" value="Los Angeles" v-model="cities" />
      <label>Los Angeles</label>
    </div>
    <div class="p-field-checkbox">
      <Checkbox name="city" value="New York" v-model="cities" />
      <label>New York</label>
    </div>
    <div class="p-field-checkbox">
      <Checkbox name="city" value="San Francisco" v-model="cities" />
      <label>San Francisco</label>
    </div>
  </div>
</template>

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

We add the primevue.min.css to add the core CSS.

theme.css has the theme CSS.

We also need the primeicons.css to add the checkbox icon.

Then we register the Checkbox component to let us use the checkbox.

In App.vue , we add the Checkbox component.

We bind each one to the same reactive property to let us add multiple checked values.

Chips Input

We can add a chips input into our Vue 3 app with PrimeVue’s Chips component.

For example, we can write:

main.js

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

App.vue

<template>
  <div>
    <Chips v-model="value">
      <template #chip="slotProps">
        <div>
          <span>{{ slotProps.value }} </span>
          <i class="pi pi-user-plus" style="font-size: 14px"></i>
        </div>
      </template>
    </Chips>
  </div>
</template>

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

We add the Chips component and bind it to the value reactive property.

We optionally populate the chip slot to get the value that we entered with the slotProps.value property and display the content we want in the chip.

Color Picker

The ColorPicker component lets us add a color picker component.

To use it, we write:

main.js

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

App.vue

<template>
  <div>
    <ColorPicker v-model="color" />
  </div>
</template>

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

We register the ColorPicker component and use it in App.vue .

We bind the picker color’s value with v-model to the color reactive property.

The inline property lets us display the color picker preview inline:

<template>
  <div>
    <ColorPicker v-model="color" inline  />
  </div>
</template>

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

The color picker will display on the page instead of in a popup.

Conclusion

We can add a checkbox, chips input, and color picker into our Vue 3 app with the PrimeVue framework.