Step-by-Step Guide: Install & Use PrimeVue with Nuxt and Tailwind CSS

Want to build beautiful UI components with PrimeVue, use Nuxt for your app structure, and Tailwind CSS for styling? Here's the ultimate quick-start guide!

---

1️⃣ Install Tailwind CSS, PrimeVue & PrimeIcons

Let’s start by adding Tailwind, PrimeVue and PrimeIcons in your Nuxt project:

# Add Tailwind CSS
npx nuxi module add tailwindcss
npm i tailwindcss-primeui

# Add PrimeVue and dependencies
npm install primevue @primeuix/themes
npm install --save-dev @primevue/nuxt-module

# Add PrimeIcons
npm install primeicons

✅ This installs:

• Tailwind CSS (utility-first styling)

• PrimeVue (component library)

• PrimeIcons (icon pack)

---

2️⃣ Configure PrimeVue in Your Nuxt Project

Update nuxt.config.ts:

/* nuxt.config.ts */
import Aura from '@primeuix/themes/aura';

export default defineNuxtConfig({
    modules: [
        '@primevue/nuxt-module'
    ],
    primevue: {
        usePrimeVue: true,
        autoImport: true,
        options: {
          theme: {
            preset: Aura,
          },
        },
    }
})

Now, create the main CSS file, inside main.css, add the following:

/* assets/css/main.css */
@import "tailwindcss";
@import "tailwindcss-primeui";
@import "primeicons/primeicons.css";

---

3️⃣ Use Tailwind + PrimeVue Together

Let’s combine the best of both worlds: Tailwind’s utility-first styling and PrimeVue’s powerful UI components.

✨ We'll use InputText and Button as an example, but this applies to any PrimeVue component.

---

🔧 Step 1: Register the Component in nuxt.config.ts

Tell Nuxt to auto-import only the components you need — this helps keep your bundle light and clean.

/* nuxt.config.ts */

export default defineNuxtConfig({
  //
  components: {
    exclude: ['Form', 'FormField'], // Optional: skip unused components
    include: ['InputText', 'Button'],         // Add only what you use
  },
})

✅ You can add more PrimeVue components to the include list as needed.

---

🧩 Step 2: Use It in Your Page or Component

Now you can use the InputText and Button and other PrimeVue components in your Vue files — and style them with Tailwind as usual:

/* pages/index.vue */
<template>
  <div class="p-8 space-y-4 bg-gray-100 min-h-screen">
    <h1 class="text-3xl font-bold text-green-700">
      PrimeVue + TailwindCSS + Nuxt
    </h1>
    <InputText placeholder="Type something..." class="w-full" />
    <Button label="Click Me" class="p-button-success" />
  </div>
</template>

---

🎨 Bonus: Theme Customization

You can switch or customize PrimeVue themes by importing different CSS files, like aura-light-green or any other from their theme collection.

---

4️⃣ Run Your App

Time to test everything!

npm run dev

🎉 You should now see your Nuxt app running with fully functional PrimeVue components and Tailwind styles!

---

🚀 Bonus Tips

• Explore more PrimeVue components: https://primevue.org

• Tailwind and PrimeVue work great together when scoped properly