This is amazing, a tutorial on cssLayers & Tailwind would be great. Especially when you use Tailwind with Styled Mode and when to use Tailwind with Unstyled Mode.
Can you explain how to override the component token for the Autocomplete Chips in the theme presets? Namely, the background color of each chip. The browser inspector shows the background styles coming from ackground: var(--p-chip-background); and I'd rather not use CSS. Would like to know how to set up a theme preset for Autocomplete Chips as you've shown in the video for the buttons.
how did you get the variable name at 10:45 without looking at the text from 9:10? we see button.padding.x --p-button-padding-x how did you know its supposed to be paddingX instead? from the text above i'd expect it to be: button:{ padding:{ x: '1rem' } }
PrimeVue v4 is great, thanks for your work on this. My only issue is the SSR support with the new styled mode theming. I am unable to get the theme CSS to load server-side with the standard theme configuration. Is there a way to export a theme preset to a css file, or directly manage the dynamic imports? For context, I am having this issue with an Inertia.js SSR Laravel application, and a Nuxt application using universal (server-side) rendering.
@@connorabbas6449 Nuxt module handles this for Nuxt SSR but we haven’t worked on Inertia yet. I will discuss it with the team, thank you for the feedback.
Semantic is good for reuse, the default themes did not share severities much but you can do it in your own custom theme for sure. You can add semantic.extend.severity.* tokens. primevue.org/theming/styled/#extend
How can i get my preset in a different file in nuxt? import MyTheme from '@/themes' export default defineNuxtConfig primevue: { options: { ripple: false, theme: { preset: Theme ,
hello, I find this primvue very helpful and thank you for your work. How can I do it if I want to override secondary color, success, info, and so on? Globally. thanx!
Ok, i tried it out with PrimeNG 18.2 and man - this is so superior! Especially when working with a design team! Thank you very much for your efforts!
PrimeVue is one of the best of it's kind. Keep it up 👍
This is amazing, a tutorial on cssLayers & Tailwind would be great. Especially when you use Tailwind with Styled Mode and when to use Tailwind with Unstyled Mode.
@@Kerni094 As a coincidence, TW integration tutorials are coming up with styled and unstyled as you mentioned, lot of important concepts to cover
Why are the presets examples removed from the documentation?
Try the palette button in the top right to see the style site-wide. I was mad at it first too before I found this.
Thank you for the video!
I hope you guys also make the tutorial for primeng. Thanks for such good work.
Definitely, right after v18 final, focus will switch to NG
When will the new Figma plugin be released?
@@MrSabifa By the end of this year hopefully.
Can you explain how to override the component token for the Autocomplete Chips in the theme presets? Namely, the background color of each chip. The browser inspector shows the background styles coming from ackground: var(--p-chip-background); and I'd rather not use CSS. Would like to know how to set up a theme preset for Autocomplete Chips as you've shown in the video for the buttons.
how did you get the variable name at 10:45 without looking at the text from 9:10?
we see button.padding.x --p-button-padding-x
how did you know its supposed to be paddingX instead?
from the text above i'd expect it to be:
button:{
padding:{
x: '1rem'
}
}
EDIT: read the docs, it seems both options are supposed to work, amazing!
I like the 'Noir' as primary and 'Slate' as surface. How to set them?
👍👍
PrimeVue v4 is great, thanks for your work on this. My only issue is the SSR support with the new styled mode theming. I am unable to get the theme CSS to load server-side with the standard theme configuration. Is there a way to export a theme preset to a css file, or directly manage the dynamic imports? For context, I am having this issue with an Inertia.js SSR Laravel application, and a Nuxt application using universal (server-side) rendering.
@@connorabbas6449 Nuxt module handles this for Nuxt SSR but we haven’t worked on Inertia yet. I will discuss it with the team, thank you for the feedback.
Why don't severities have semantic tokens?
Semantic is good for reuse, the default themes did not share severities much but you can do it in your own custom theme for sure. You can add semantic.extend.severity.* tokens.
primevue.org/theming/styled/#extend
How can i get my preset in a different file in nuxt?
import MyTheme from '@/themes'
export default defineNuxtConfig
primevue: {
options: {
ripple: false,
theme: {
preset: Theme
,
hello, I find this primvue very helpful and thank you for your work. How can I do it if I want to override secondary color, success, info, and so on? Globally. thanx!
The customization concepts seen in this video will also be applicable to primeng?
@@leonardobuscemiwork Yes, same. Already available in v18-beta.2. I will create new tutorials for PrimeNG after v18 final is out.
@@cagataycivici thanks! Great news, I can already start my tests, but I can't wait for you to create the dedicated video
I regret using primevue so much. One of the most annoying to style ds.
@@doingkettlebells There is Visual Theme Editor now at Showcase if you are struggling with the API.
@@cagataycivici i don't struggle w writing code, the api is just poorly documented and untyped.
@ Interesting