Setting Up PrimeVue, Tailwind CSS in a Nuxt Project

Installation steps to get started with the Tailwind CSS presets of the unstyled PrimeVue in a Nuxt Project

[@devopssimon]

at 0:54 you go from about to open the project in VSCode and the next frame is you opening a zip file containing presets. Where did the zip file come from?

[@ryunode]

Where did the zip file come from?

[@trevorokwirri1408]

I have tried to use Toast in primevue with nuxt but it tell me "No PrimeVue Toast provided" Since I don't have an app instance on nuxt3 I decided to use a plugin but as it turns out it does not work. So the ToastService must be the issue. I don't see any documentation on how to use it with the nuxt 3 module for primevue. Please help

[@hemantsah8567]

Can you make a tutorial for VueJs+ PrimeVue + Tailwindcss. I am having lots of trouble. When I install tailwind, primevue's components lose its css.

[@cagataycivici]

Please see primevue.org/guides/csslayer/#tailwind

[@hemantsah8567]

@@cagataycivici Thank you , it worked

[@iuliand4054]

Thank you
@@cagataycivici

[@namaefumei]

​@@cagataycivici getting 404 from the link. Is it possible to get the new correct link?

[@nanaassumadu4997]

Hello Cagatay, really appreciate this. However I'd like to know...is there a way I can use primevue and Nuxt UI together... I know they both provide me with what I need an its a bit excessive of me... However, there are a few components that are extremely well done in primevue that I want in a Nuxt project I have already built with Nuxt UI. When I tried, the toast components of both libraries seemed to conflict. Is there a way around this or I should just stick with just 1

[@namaefumei]

Just tried it and got some problems. First downloading and setting presets didn't work because it keeps saying folder or file doesn't exist. Then there's no search or inputField in the docs. Then the presets didn't apply.

[@javierbosch1338]

incredible Cagatay! Great job to the team! Question: Does the presets and tailwind integration support tree shaking?

[@cagataycivici]

I think Vite handles it but this week we are planning to deep dive for the confirmation.

[@Q-Bandito]

How do I get tailwind css back when I use it this way?

[@RichColemanTx]

amazing!!

[@romanmed9035]

i have transparent background on use the primevue on all components.

[@aturan-fo1qt]

Thank you 👍

[@bynneh]

Good times!

[@peterlacza5223]

do you know how to set up the webstorm tailwind css autocomplete plugin to recommend me tailwind classes inside pt?

[@peterlacza5223]

oh, just needed to add pt to classAttributes in tailwind css plugin settings :)

[@juandaniel8139]

I do the same thing and still throwing me an error. Reading the new tutorial with tailwind presets. The nuxt.config.ts in modules doesnt have the "@nuxtjs/tailwindcss". It doesnt working this! And I already read other comments and the other people still having troubles with the set up.

[@legonz5047]

Tryed following your Guide but what ever i do it complains about:
importPT: { from: path.resolve(__dirname, './presets/lara/') }, missing an "as:"
And Could not resolve .... nuxt/primevue-plugin.mjs
How can i fix this?

[@cagataycivici]

Can you create a post at discussions and paste the link here so we can discuss there.
github.com/orgs/primefaces/discussions

[@juliancoles7789]

Are you using Windows? I had to use: importPT: { from: (path.join(__dirname, './presets/lara/')).replace(/\\/g, '/') } or even easier as mentioned in the comments below: importPT: { from: '~/presets/lara/'}

[@EmirCivici]

Perfekto 😂

[@GergelyCsermely]

Thanks

[@putrafajarh]

how about replace tailwindcss with unocss ?

[@cagataycivici]

I think uno has a 1-1 preset that maps with Tailwind. We also have this guide for UnoCSS integration primevue.org/unocss

[@baigeldysultanov]

This is not for beginners ..

[@saddansyah]

Failed to resolve import "D:codessaddansyah.spacepresetslara" from "virtual:nuxt:D:\codes\project\.nuxt\primevue-plugin.mjs". Does the file exist?. And then return 500 on localhost page
I encountered new problem in my unstyled tailwind nuxt3, please help sir thanks

[@jurajrojko7851]

I was able to fix it by changing importPT to { from: "~/presets/lara/" }

[@legonz5047]

@@jurajrojko7851 tryed it but dows not work. :/
Also VSCode complains that an "as" propperty is declared in the " importPT: { from: path.resolve(__dirname, '~/presets/lara/') }," line

[@sgwong513]

@@legonz5047 works for me, should be this: importPT: { from: "~/presets/lara/" },

[@Q-Bandito]

@@legonz5047 try importPT: { from: '/presets/wind' },

[@Q-Bandito]

or lara

[@batuhankir8402]

as byarakları as as as 😊⬜🟥