Using PrimeVue within a vue component library

[johnwc]

Describe the bug

We are using PrimeVue in one of our vue component libraries and then importing the library within our main web application. The theme does not seem to be added to the application's styling. Using DataTable as an example, the table is rendering and working as expected. But it is not styled at all. If we manually add a DataTable component within the same page that is importing our component from our library, then the theme gets injected into the page and both the DataTable we added as well as the DataTable being used in the library are styled correctly. It seems that PrimeVue config is not writing the css to the page when it doesn't think the component is used, not realizing it is being used from imported library.

There does not seem to be a way to have PrimeVue config write out the css for components it doesn't know about.

Reproducer

N/A

PrimeVue version

4.0.7

Vue version

4.x

Language

TypeScript

Build / Runtime

Vite

Browser(s)

Any

Steps to reproduce the behavior

1. Create vue component library
2. Use PrimeVue component(DataTable) within a custom component in library.
3. Build & publish library to npm repo.
4. Create vue web app
5. Import your library from npm repo
6. Configure web app with PrimeVue config, using Aura theme

   
   const app = createApp(App)
   .use(PrimeVue, {
       theme: {
           preset: Aura,
           options: {
               prefix: 'p',
               darkModeSelector: '.app-dark',
               cssLayer: false
           }
       }
   })

7. Use custom component from library in page; seeing it contain no style.
8. Add same PrimeVue type component(DataTable), that was used in custom component, above/below custom component; see both have style applied.

### Expected behavior

Adding PrimeVue config with theme configured produces css for any component used in page or library components.
 ```typescript
const app = createApp(App)
    .use(PrimeVue, {
        theme: {
            preset: Aura,
            options: {
                prefix: 'p',
                darkModeSelector: '.app-dark',
                cssLayer: false
            }
        }
    })

[roelhem]

I've stumbled on this problem to today. For me, the problem was the ui library had primevue as a normal dependency in the package.json. This resulted in two different PrimeVue versions in the consumer package... The used theme is registered on a global Theme object that does not use the provide/inject mechanism of Vue. In my situation, I had two different Theme objects: one to which the ui libraries were listening and a different one on which the theme was actually set.

I solved my case by making primevue a peer dependency in the ui library to ensure that I had only one version of primevue in the consuming package.

[johnwc]

I've stumbled on this problem to today. For me, the problem was the ui library had primevue as a normal dependency in the package.json. This resulted in two different PrimeVue versions in the consumer package... The used theme is registered on a global Theme object that does not use the provide/inject mechanism of Vue. In my situation, I had two different Theme objects: one to which the ui libraries were listening and a different one on which the theme was actually set.

I solved my case by making primevue a peer dependency in the ui library to ensure that I had only one version of primevue in the consuming package.

Can you give an example of what you are referring to as in code examples, and what you are calling in the library to get the theme to even work in the primary app. I believe you are getting it to work because you are using primevue components in the primary app, and the plugin detects them and injects the css in the page which everything uses. Try moving all primevue usage to the library, then apply the theme in the primary app. This is where we are not seeing any css being injected into the page, as the PrimeVue plugin is not detecting any PrimveVue components in the app itself.