PrimeVue Setup

PrimeVue is a rich set of open-source UI component library for Vue applications. This guide will help you set up PrimeVue in your project.

  1. Install PrimeVue and its dependencies:
npm install primevue @primevue/themes primeicons
npm install --save-dev @primevue/nuxt-module
  1. Register PrimeVue in your nuxt.config.ts:
import {definePreset} from '@primevue/themes';
import Aura from '@primevue/themes/aura';

const MyPreset = definePreset(Aura, {
    semantic: {
        primary: {}
    }
});


export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        options: {
      theme: {
          preset: MyPreset,
          options: {
              darkModeSelector: '.dark'
          }
        }
      }
    }
})
  1. Add PrimeVue CSS to your nuxt.config.ts:
  css: [
    "primeicons/primeicons.css",
  ],
  1. Add code to plugins/primevue.js:
// ./plugins/primevue.js
import { defineNuxtPlugin } from "#app";
import PrimeVue from "primevue/config";
import ToastService from "primevue/toastservice";
import Button from "primevue/button";

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(PrimeVue);
  nuxtApp.vueApp.use(ToastService);
  nuxtApp.vueApp.component("Button", Button);
})
Conclusion

PrimeVue provides a wide range of UI components that can be easily integrated into your Vue application. For more information and detailed documentation, visit the PrimeVue website.

Edit this page on GitHub