Themes are installed by the wrong package

[mertsincan]

When @primevue/core is installed, the @primevue/theme package is also installed. This is a mistake and unstyled mode may also cause problems. That's why themes should always be included in the project separately from the @primevue/themes package.

[mcmimik]

Hi @mertsincan,

In version rc.2, the import import { $dt } from "@primevue/themes"; stopped working and has been replaced with import { $dt } from "@primeuix/styled";.

Could you please clarify where we should import $dt from now, considering the documentation still points to the @primevue/themes package? Also, when using the import from @primeuix/styled, TypeScript reports that the $dt export is missing, which seems similar to the issue described in #5749.

Currently, we have to use the following workaround:

// @ts-expect-error Remove once types are fixed
import { $dt } from "@primeuix/styled";

Could you please address the type definition so we don't need to use @ts-expect-error?

Thank you!

[mcmimik]

Additionally, we need to import types from ts-helpers, specifically the DesignToken type. Currently, it seems impossible to import this type from @primevue/core without encountering an error. Could you please fix an explicit export of the DesignToken type?

[mertsincan]

Hi @mcmimik,

Thanks a lot for your testing and report! Could you please create a separate ticket for it? I'll work on it in the next release.

Best Regards,

[cwillinx]

Also, import Aura from @primevue/themes/aura seems to be gone, but not available under @primeuix/styled either.

[mertsincan]

Also, import Aura from @primevue/themes/aura seems to be gone, but not available under @primeuix/styled either.

Is its type definition?

[mertsincan]

@primeuix/styled is the core API. So, you shouldn't need this. You need always use @primevue/themes and it uses this core API and exports it via @primevue/themes.

[cwillinx]

Vite can't find it:

This is the import:

import type { PrimeVueConfiguration } from 'primevue/config';
import { definePreset } from '@primeuix/styled';
import Aura from '@primevue/themes/aura';


const MyPreset = definePreset(Aura, {
  primitive: {

...

export const primeOptions: PrimeVueConfiguration = {
  theme: {
    base: Aura,
    preset: MyPreset,
...

This is the error message on dev build:

Error: The following dependencies are imported but could not be resolved:
  @primevue/themes/aura (imported by /Users/.../src/Frontend/src/shared/primeOptions.ts)
  Are they installed?

I can't see it in the node_modules either.

[mertsincan]

Thanks a lot for the update, @cwillinx! But, this structure has already changed. Please see; https://primevue.org/theming/styled/

Custom theme example; https://github.com/primefaces/primevue/blob/master/apps/showcase/themes/app-theme.js

A starter with vite; https://github.com/primefaces/primevue-examples/tree/main/vite-quickstart

[cwillinx]

Ok, now I understand, I have to install it as a separate npm package.

Doing that, it's working fine, I just realized this change

[mcmimik]

Could you please create a separate ticket for it? I'll work on it in the next release.

Sure, here it is: #5910
@mertsincan