PrimeVue v4 issue with styling and wrapper components. #2158

MonkFox · 2024-06-17T15:44:31Z

MonkFox
Jun 17, 2024

Describe the Issue

I have custom components that utilize PrimeVue's native components in a separate npm package.

The site and the package both reference the same 4.0.0-rc-1 PrimeVue versions (/themes too).

I'm doing this because I have multiple sites that serve different functions, but are used by the same user base, so I want to keep the UI consistent.

I'm running into an issue where if I do not import and render the PrimeVue components hidden (v-show="false") that are used in my separate package in the site's App.vue, then the corresponding PrimeVue's component's <style data-primevue-style-id="[COMPONENTTYPE]-variables"/> are not written to the head tag.

For Example:

  //App.vue
  
  <template>
  //Native PrimeVue components
  //If this isn't here, style variables for these components don't exist in <head>
  
  <InputText v-show="showDefaultComps"></InputText>
  <ToggleSwitch v-show="showDefaultComps"></ToggleSwitch>
  <DataTable v-show="showDefaultComps"></DataTable>
  <Paginator v-show="showDefaultComps"></Paginator>
  <Dropdown v-show="showDefaultComps"></Dropdown>
  <Select v-show="showDefaultComps"></Select>
  <Popover v-show="showDefaultComps"></Popover>

  <Tabs v-show="showDefaultComps">
    <TabList>
      <Tab value="0"></Tab>
    </TabList>
    <TabPanels>
      <TabPanel value="0"> </TabPanel>
    </TabPanels>
  </Tabs>

  //Component that uses component-lib wrapper components, containing PrimeVue native components.
  
  <EquipmentMain v-if="component == 'EquipmentMain'"></EquipmentMain>
  </template>

I thought that having this in place would work as a hacky work-around, but when I started testing the updatePreset() function that is called subsequently in the ThemeSwitcher.vue, a lot of the semantic css classes are removed and no longer exist (--p-form-field-background for example).

This what I'm seeing when the app is initially loaded:

This is after changing the theme ( calling updatePreset() )

Is there a way to force all of the primitive, sematic and component classes/tokens to be created regardless of actual use in the application?
Or is there something I'm doing incorrectly when using my wrapper components from a npm package?

PrimeVue version
4.0.0-rc-1

Language
Vue/Typescript

Build / Runtime
Vite

Answered by cristinafernandez1234

Jan 31, 2025

Right now I don't have too much time to create an example repo, but I can share the files, maybe it helps:

The index.js where we have all components exported:

import "./assets/style/global.css";

import PrimeVue from "primevue/config";
import ConfirmationService from "primevue/confirmationservice";
import ToastService from "primevue/toastservice";
import Tooltip from "primevue/tooltip";

import { FilterMatchMode, FilterService, FilterOperator } from "@primevue/core/api";
import { UniqueComponentId } from "@primevue/core/utils";

import { useToast } from "primevue/usetoast";

import CustomPreset from "./CustomPreset.js";

export {
  PrimeVue as DesignSystemConfig,
  ConfirmationService,
  …

View full answer

vieira-brz · 2024-06-17T19:56:07Z

vieira-brz
Jun 17, 2024

You've hit upon a tricky aspect of how PrimeVue handles its CSS styles, and it's definitely related to how it dynamically injects styles based on component usage.

Understanding the Problem:

PrimeVue uses a clever technique to only inject the CSS styles needed for components that are actually used in your application. This is a performance optimization, but it creates a few challenges:

Dynamic Injection: Styles are injected into the <head> tag when a PrimeVue component is rendered. If a component is never rendered, its CSS won't be injected.
Semantic Token Dependency: Some styles, like --p-form-field-background, depend on other components being rendered to establish the necessary CSS variables and styles. This is where the issue arises when you're using components within a separate npm package.

Why Your Approach Isn't Working:

While hiding components with v-show="false" might seem like a hack, it doesn't fully fool PrimeVue's style injection mechanism. Here's why:

Component Life Cycle: Even if a component is hidden, it goes through its lifecycle (created, mounted, etc.). This might still trigger some internal style registration.
Style Dependency: The removal of styles you observe could be related to other components within your custom components. If those components aren't rendered, they might be removing styles that your other components rely on.

Potential Solutions:

Force Style Injection: There's no official way to force PrimeVue to inject all styles regardless of usage. However, you could try these techniques:
- Early Loading: Import the core PrimeVue CSS file directly in your main app's index.html. This will ensure that all the base styles are loaded. You can then use the PrimeVue theme as usual.
- Global Style Import: If your custom component library is primarily for UI elements, you could import a global CSS file containing all the core PrimeVue styles. This will guarantee that all styles are available.
Component Registration: Make sure your custom components are properly registered with PrimeVue. This involves making sure that the custom components extend the required classes or implement the necessary interfaces from PrimeVue.
Custom Theme: You could consider creating a custom theme that includes all the styles from your custom component package. This might require more upfront effort but gives you complete control over styles and ensures consistency across your apps.
PrimeVue's Theme Switcher: Instead of relying on the built-in PrimeVue theme, you could use its Theme Switcher component to load different themes dynamically. This would allow you to inject all the necessary styles when needed.
Re-evaluate Custom Components: Consider if you really need to create custom components or if you can achieve the same results by using PrimeVue's existing components with custom styles.

Additional Considerations:

Style Dependency: Carefully analyze the CSS dependencies within your custom components to understand why styles might be disappearing when components are not rendered.
Performance: While forcing style injection will ensure all styles are present, it might impact performance, especially on large applications.

Debugging Tips:

Inspect the <head>: Use your browser's developer tools to inspect the <head> tag and see which PrimeVue styles are being injected.
Analyze CSS Dependencies: Examine your CSS code to understand how styles are defined and used.
Test with Simple Components: Create a basic component in your custom package that uses a few PrimeVue components. Test if its styles are correctly injected.

Remember: PrimeVue's style injection mechanism is a balance between performance and flexibility. You might need to experiment with different techniques to find the best solution for your specific use case.

Let me know if you have any further questions or would like more code examples!

2 replies

savonbeldi Oct 6, 2024

Could you please explain solution 2 in more details? I'd like to see an example for e.g. Button.

johnwc Nov 4, 2024

Remember: PrimeVue's style injection mechanism is a balance between performance and flexibility. You might need to experiment with different techniques to find the best solution for your specific use case.

PrimeVue's style injection is not performant at all and is not for performance, it is for controlling. So that you can dynamically create a prefixed styles on-the-fly so to only affect your own components. If it was for performance, it would be pre-built, minified, and hosted within a CDN for you to add to your header; so that it is pulled once and cached locally. And any site that uses the style benefit from it already being pulled and cached in your browser.

Can you please give examples of your solutions, showing that they are viable solutions and not something someone is chasing down that is not proven to be correct.

MonkFox · 2024-06-20T12:47:11Z

MonkFox
Jun 20, 2024
Author

Thanks for the reply @vieira-brz !

I've tried a lot of the things you have suggested, but to no avail.

In the end, the only thing that really worked for me was pre-loading all of the controls that I utilize in my control library, in my main app's App.vue. I just slapped a v-show="false" so that they rendered, but so that they were hidden.
This was the only way I could get all of the --p-inputtext-* and etc to generate in the head section.
Because while the PrimeVue components utilized in my control library would render, the top-level PrimeVue mechanism controlling the variable/style generation didn't detect them.

For applying the theme dynamically, I force a reload of the page after the user chooses another palette. Kind of lame, but it works.

Maybe there's a way to provide/inject some sort of 'theme' service from PrimeVue into my control library, but as of now I haven't found any examples of that.

Thanks again!

0 replies

savonbeldi · 2024-10-06T16:49:52Z

savonbeldi
Oct 6, 2024

@MonkFox I have been stuck with this problem for a couple of hours now... Did you manage to find a real solution?

0 replies

MonkFox · 2024-10-07T13:20:11Z

MonkFox
Oct 7, 2024
Author

@savonbeldi
No, I wasn't able to. That's just part of the project setup for now. Just to be clear/reiterate, my custom components are in a VUE component library, and the library is an artifact on Azure Devops.

If my component code is local to the dependent project, things work as expected. It's when the components are referenced from the package that styling breaks.

Reuseable, custom components integrating PrimeVue components seems pretty logical to me. Reuseable grid toolbars, module/page/section headers, custom DataGrid components with specific behavior and OData protocol, for example.

In regard to the styling mechanism, this seems to not be supported out of the box with versions 3.45.0+.

If you're able to solve this somehow, I would love to be notified.

Thanks

0 replies

mertsincan · 2024-10-07T16:08:25Z

mertsincan
Oct 7, 2024
Maintainer

Hi @MonkFox,

Do you use @primevue/nuxt-module?

1 reply

MonkFox Nov 6, 2024
Author

@mertsincan
No, I'm not using that package currently.

cristinafernandez1234 · 2024-10-09T13:49:33Z

cristinafernandez1234
Oct 9, 2024

Thanks @vieira-brz for the possible solutions provided. I am interested in the solution 1 that you provided, but I didn't get it right yet.

My case is similar that the one in the discussion, custom components that use PrimeVue's native components in a separate npm package. The styles are shown well in the Storybook project where the PrimeVue is installed but not in the projects where the npm package is installed. The problem is that all component variables are missing (example <style type="text/css" data-primevue-style-id="button-variables"> for Button component is not located in the projects), but primitive-variables, semantic-variables, global-variables, global-style, base and button-style styles are well placed in the <head>.

We found a very manual workaround, copying all the variables component by component in Storybook, put them in an CSS file and export it along with the library, but there should be a more maintenable way to do it, I opened a discussion about this some months ago, just in case it helps: https://github.com/orgs/primefaces/discussions/2436#discussioncomment-10272692

0 replies

elkofy · 2025-01-05T18:41:44Z

elkofy
Jan 5, 2025

I have a similar issue in my custom component i can't use primevue Toast

0 replies

itsalic · 2025-01-29T16:54:49Z

itsalic
Jan 29, 2025

I am in the same boat as @cristinafernandez1234 where any usage of primevue in a separate npm package will not cause primevue to detect a component being used and therefore all the css variables files for that component will not be loaded.

This has prevented my from upgrading the codebase of one of my products to primevue v4 and I'll be staying on v3 until it gets resolved.

8 replies

cristinafernandez1234 Jan 30, 2025

Nice to hear that!

MonkFox Jan 30, 2025
Author

@cristinafernandez1234, I was excited when I saw this, this morning. However, I'm still not able to get the styles to work correctly after putting the vue, primevue, @primevue/themes, and @primeuix/styled in the component library's peerDependencies.

Would you mind posting your index/main.ts exports of your components in your component app, and then how you're registering them in the main app?

Thanks!

johnwc Jan 31, 2025

Yes, it would be nice if someone could create an example repo with a working example.

cristinafernandez1234 Jan 31, 2025

Right now I don't have too much time to create an example repo, but I can share the files, maybe it helps:

The index.js where we have all components exported:

import "./assets/style/global.css";

import PrimeVue from "primevue/config";
import ConfirmationService from "primevue/confirmationservice";
import ToastService from "primevue/toastservice";
import Tooltip from "primevue/tooltip";

import { FilterMatchMode, FilterService, FilterOperator } from "@primevue/core/api";
import { UniqueComponentId } from "@primevue/core/utils";

import { useToast } from "primevue/usetoast";

import CustomPreset from "./CustomPreset.js";

export {
  PrimeVue as DesignSystemConfig,
  ConfirmationService,
  ToastService,
  Tooltip,
  FilterMatchMode,
  FilterService,
  FilterOperator,
  UniqueComponentId,
  useToast,
  CustomPreset
};

The main.js where I import the library:

import { createApp } from "vue";
import App from "@/App";
import {
  DesignSystemConfig,
  ConfirmationService,
  ToastService,
  Tooltip,
  CustomPreset
} from "custom-library-package";
import "custom-library-package/dist/library.mjs.min.css";
import "./assets/styles/styles.scss";

createApp(App)
  .use(DesignSystemConfig, {
    theme: {
      preset: CustomPreset
    }
  })
  .use(ConfirmationService)
  .use(ToastService)
  .directive("tooltip", Tooltip)
  .mount("#app");

Answer selected by MonkFox

itsalic Jan 31, 2025

I will try and mention the key parts that enabled it to work for me. I'm using vite to build so some bits will be specific to vite config.

main.js

import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';

const app = createApp(App);

app.use(PrimeVue, {
    theme: {
        preset: Aura
    }
});

In the top level application package.json

{
  "name": "my-app",
  "dependencies": {
    "@primeuix/styled": "*",
    "@primevue/themes": "*",
    "my-component-library": "*",
    "primevue": "^4.2.4",
    // etc
}

vite.config.js of the top level application

export default defineConfig({
    resolve: {
        dedupe: [
	    'primevue'
        ],
    },
    // etc
 })

Note: do NOT use optimizeDeps: { exclude: [] } for the child packages, this will break the theming (This had me stuck for many hours 😢 )

In all child packages that use primevue package.json

{
  "name": "my-component-library",
  "peerDependencies": {
      "@primeuix/styled": "*",
      "@primevue/themes": "*",
      "primevue": "*",
      // etc
    }
}

vite.config.js of child packages

export default defineConfig({
   rollupOptions: {
      external: [
        "primevue",
        "@primeuix/styled",
        "@primevue/themes"
      ]
   },
   // etc
})

MonkFox · 2025-01-31T21:51:34Z

MonkFox
Jan 31, 2025
Author

Importing and using the component library's PrimeVue instance is what solved it for me (I assume that's what's going on):

//vue-component-library index.ts
export { PrimeVue as PrimeVueConfig };

//consuming application main.ts
import { PrimeVueConfig } from 'vue-component-library'

  app.use(PrimeVueConfig, {
    theme: {
      preset: Aura,
      options: {
        prefix: 'p',
        darkModeSelector: 'system',
        cssLayer: false
      }
    },
    zIndex: {
      modal: 1100,
      overlay: 1500,
      menu: 1000,
      tooltip: 1100
    }
  })

In addition to:

//vue-component-library package.json
{
//...
  "peerDependencies": {
    "vue": "^3.5.13",
    "primeicons": "^7.0.0",
    "primevue": "^4.2.5",
    "@primeuix/styled": "^0.4.1",
    "@primevue/themes": "^4.2.5"
  }
}

//component library vite.config.ts
export default defineConfig({
//...
    rollupOptions: {
      external: ["vue", "@primeuix/styled", "@primevue/themes", "primevue"],
     //...
    },
});

For local testing before publishing to the Azure artifact, I'm referencing my component library like so in my consuming app:

//consuming app's package.json
{
//...
"dependencies": {
//....
"vue-component-library": "file:../../../../vue-jc-library-v4/vue-jc-library-v4"
}
}

In my case, I didn't need the following dedupe entry in my consuming app's vite.config.ts

//consuming app's vite.config.ts
export default defineConfig({
    resolve: {
        dedupe: [
	    'primevue'
        ],
    },
    // etc
 })

Thank you so much for your time and patience @itsalic and @cristinafernandez1234!!

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PrimeTek

PrimeVue v4 issue with styling and wrapper components. #2158

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 9 comments 11 replies

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

PrimeVue v4 issue with styling and wrapper components. #2158

Replies: 9 comments · 11 replies

MonkFox Jun 20, 2024 Author

MonkFox Oct 7, 2024 Author

mertsincan Oct 7, 2024 Maintainer

MonkFox Nov 6, 2024 Author

MonkFox Jan 30, 2025 Author

MonkFox Jan 31, 2025 Author

Replies: 9 comments 11 replies

MonkFox
Jun 20, 2024
Author

MonkFox
Oct 7, 2024
Author

mertsincan
Oct 7, 2024
Maintainer

MonkFox Nov 6, 2024
Author

MonkFox Jan 30, 2025
Author

MonkFox
Jan 31, 2025
Author