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
Subscribe to my newsletter
Read articles from Asmar Syed directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
