Vue 3 Development with the PrimeVue Framework — Dropdown and Rich Text Editor

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.

Dropdown

We can add a dropdown into our Vue 3 app with PrimeVue’s Dropdown component.

For example, we can write:

main.js

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

App.vue

<template>
  <div>
    <Dropdown
      v-model="selectedCity"
      :options="cities"
      optionLabel="name"
      placeholder="Select a City"
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selectedCity: "",
      cities: [
        { name: "New York", code: "NY" },
        { name: "Miami", code: "MI" },
        { name: "London", code: "LDN" },
      ],
    };
  },
  methods: {},
};
</script>

name is displayed to the user as set by the optionLabel prop.

And code is the value of the value attribute.

placeholder is displayed as the dropdown placeholder.

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

The filter prop will render an input box that lets us filter the choices:

<template>
  <div>
    <Dropdown
      v-model="selectedCity"
      :options="cities"
      optionLabel="name"
      placeholder="Select a City"
      filter
    />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selectedCity: "",
      cities: [
        { name: "New York", code: "NY" },
        { name: "Miami", code: "MI" },
        { name: "London", code: "LDN" },
      ],
    };
  },
  methods: {},
};
</script>

We can customize how each option is displayed with the option slot.

And we can customize how the selected value is displayed with the value slot:

<template>
  <div>
    <Dropdown
      v-model="selectedCity"
      :options="cities"
      optionLabel="name"
      placeholder="Select a City"
      showClear
    >
      <template #value="slotProps">
        <div class="p-dropdown-code">
          <span v-if="slotProps.value">{{ slotProps.value.name }}</span>
          <span v-else>
            {{ slotProps.placeholder }}
          </span>
        </div>
      </template>
      <template #option="slotProps">
        <div class="p-dropdown-name">
          <span v-if="slotProps.option">{{ slotProps.option.name }}</span>
          <span v-else>
            {{ slotProps.placeholder }}
          </span>
        </div>
      </template>
    </Dropdown>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      selectedCity: "",
      cities: [
        { name: "New York", code: "NY" },
        { name: "Miami", code: "MI" },
        { name: "London", code: "LDN" },
      ],
    };
  },
  methods: {},
};
</script>

Rich Text Editor

We can add a rich text editor into our Vue 3 app with PrimeVue’s Editor component.

It’s based on the Quill rich text editor.

To add it, we run npm i quill to install the Quill editor package, then we write:

main.js

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

App.vue

<template>
  <div>
    <Editor v-model="value" editorStyle="height: 320px" />
  </div>
</template>

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

We set the styles for the text editor with the editorStyle prop.

The value we enter into the editor is bound to the value reactive property with v-model .

Conclusion

We can add a dropdown and rich text editor easily into our Vue 3 app with PrimeVue.