Wrapping PrimeVue is not working

[elkofy]

I have been trying for a long time now to wrap prime vue. When I use it inside my project it is not finding the css var when i'm using it.

Here is my package.json at the time i'm writing this message:

{
  "name": "@my-entreprise/my-ui",
  "private": false,
  "version": "0.0.3",
  "type": "module",
  "files": [
    "dist",
    "src"
  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/my-entreprise/my-ui"
  },
  "main": "./dist/my-ui.umd.cjs",
  "module": "./dist/my-ui.js",
  "exports": {
    ".": {
      "import": "./dist/my-ui.js",
      "require": "./dist/my-ui.cjs"
    }
  },
  "types": "./dist/index.d.ts",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview",
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build",
    "test:unit": "vitest run",
  },
  "dependencies": {
    "@primevue/themes": "^4.0.3",
    "@volar/language-server": "2.4.0-alpha.18",
    "primeicons": "^7.0.0",
    "primevue": "^4.0.3",
    "tailwindcss-primeui": "^0.3.4",
    "vue": "^3.4.31",
    "vue-router": "4",
    "zod": "^3.23.8"
  },
  "devDependencies": {
    "@chromatic-com/storybook": "^1.6.1",
    "@primevue/auto-import-resolver": "^4.0.3",
    "@storybook/addon-essentials": "^8.2.7",
    "@storybook/addon-interactions": "^8.2.7",
    "@storybook/addon-links": "^8.2.7",
    "@storybook/addon-onboarding": "^8.2.7",
    "@storybook/blocks": "^8.2.7",
    "@storybook/test": "^8.2.7",
    "@storybook/vue3": "^8.2.7",
    "@storybook/vue3-vite": "^8.2.7",
    "@types/node": "^22.5.2",
    "@types/storybook__vue": "^5.2.1",
    "@types/vue": "^2.0.0",
    "@vitejs/plugin-vue": "^5.0.5",
    "@vue/test-utils": "^2.4.6",
    "autoprefixer": "^10.4.19",
    "eslint": "^9.8.0",
    "eslint-plugin-storybook": "^0.8.0",
    "eslint-plugin-vue": "^9.27.0",
    "jsdom": "^24.1.1",
    "postcss": "^8.4.40",
    "sass": "^1.77.8",
    "storybook": "^8.2.7",
    "tailwindcss": "^3.4.7",
    "typescript": "^5.2.2",
    "unplugin-vue-components": "^0.27.3",
    "vite": "^5.2.0",
    "vite-plugin-css-injected-by-js": "^3.5.1",
    "vite-plugin-dts": "^3.9.1",
    "vitest": "^2.0.5",
    "vue-tsc": "^2.0.24"
  },
  "eslintConfig": {
    "extends": [
      "plugin:storybook/recommended"
    ]
  }
}

and my vite.config.ts:

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'
import {fileURLToPath} from "node:url";
import Components from 'unplugin-vue-components/vite';
import {PrimeVueResolver} from "@primevue/auto-import-resolver";
import {resolve} from "path";
import dts from 'vite-plugin-dts'
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";



// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), dts({
        insertTypesEntry: true,
        tsconfigPath: resolve(__dirname, "tsconfig.app.json"),
    }),    cssInjectedByJsPlugin(),

        Components({
            resolvers: [
                PrimeVueResolver()
            ]
        })],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            name: 'myLibraryVueTs',
            fileName: "my-library-vue-ts,
        },
        cssCodeSplit: true,
        rollupOptions: {
            external: ['vue','primevue'],
            output: {
                assetFileNames: (assetInfo) => {
                    if (assetInfo.name === 'main.css') return 'my-library-vue-ts.css';
                    return assetInfo.name;
                },
                globals: {
                    vue: 'Vue'
                }
            }
        }
    },
    test: {
        globals: true,
        environment: 'jsdom',
        include: ['tests/**/*.spec.ts'],
    },
    resolve: {
        alias:
            {
                "@": fileURLToPath(new URL("./src", import.meta.url)),
            }
        ,
    },
})

[ricardogonma]

I have the same problem. Did you manage to fix it?

[SlFomin]

https://tailwind.primevue.org/vite/#importstyles

Just copy this folder to your project or also configure
https://github.com/primefaces/primevue-examples/tree/main/vite-unstyled-tailwind/src/assets

[ricardogonma]

Copying the files is not a solution since updating the library would require manual maintenance.

On the other hand, the issue only occurs when compiling the application using Vite, which compiles it to JS. In this case, the styles are not applied correctly.

[SlFomin]

You can see other examples to understand which case is more suitable for you

https://github.com/primefaces/primevue-examples/tree/main

They all work fine, at least I have