diff --git a/apps/showcase/nuxt.config.js b/apps/showcase/nuxt.config.js index 0594b7721..6b6c5457c 100644 --- a/apps/showcase/nuxt.config.js +++ b/apps/showcase/nuxt.config.js @@ -12,6 +12,14 @@ const alias = { '@primevue/icons': path.resolve(__dirname, '../../packages/icons/src') }; +let PROCESS_ENV = {}; + +try { + PROCESS_ENV = process?.env || {}; +} catch { + // NOOP +} + // https://nuxt.com/docs/api/configuration/nuxt-config export default defineNuxtConfig({ typescript: false, @@ -35,10 +43,17 @@ export default defineNuxtConfig({ '/accessibility': { redirect: { to: '/guides/accessibility', statusCode: 301 } }, '/installation': { redirect: { to: '/vite', statusCode: 301 } } }, - primevue: { - autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application. - importTheme: { from: '@/themes/app-theme.js' } - }, + primevue: + PROCESS_ENV.DEV_ENV === 'hot' + ? { + usePrimeVue: false, + autoImport: true, + loadStyles: false + } + : { + autoImport: true, // When enabled, the module automatically imports PrimeVue components and directives used throughout the application. + importTheme: { from: '@/themes/app-theme.js' } + }, app: { baseURL: baseUrl, head: { @@ -79,7 +94,8 @@ export default defineNuxtConfig({ }, runtimeConfig: { public: { - contextPath: baseUrl + contextPath: baseUrl, + DEV_ENV: PROCESS_ENV.DEV_ENV } }, gtag: { diff --git a/apps/showcase/plugins/app-state.js b/apps/showcase/plugins/app-state.js index 2b053d79c..a1a77c4ba 100644 --- a/apps/showcase/plugins/app-state.js +++ b/apps/showcase/plugins/app-state.js @@ -16,6 +16,15 @@ const $appState = { } }; -export default defineNuxtPlugin((nuxtApp) => { +export default defineNuxtPlugin(async (nuxtApp) => { + const runtimeConfig = useRuntimeConfig(); + nuxtApp.vueApp.use($appState); + + if (runtimeConfig.public.DEV_ENV === 'hot') { + const { default: PrimeVue } = await import('primevue/config'); + const { default: Noir } = await import('@/themes/app-theme'); + + nuxtApp.vueApp.use(PrimeVue, { theme: Noir }); + } }); diff --git a/package.json b/package.json index b519d3ae8..fe1b15e87 100644 --- a/package.json +++ b/package.json @@ -27,9 +27,10 @@ "build:lib": "pnpm --filter primevue build", "build:themes": "pnpm --filter themes build", "build:icons": "pnpm --filter icons build", - "build:showcase": "pnpm --filter showcase build:prebuild", + "build:showcase": "pnpm --filter showcase build", "build:apidoc": "pnpm --filter themes build:tokens && pnpm --filter showcase build:apidoc", "dev": "pnpm --filter showcase dev", + "hot:dev": "DEV_ENV=hot pnpm --filter showcase dev", "module:dev": "pnpm --filter @primevue/nuxt-module dev", "security:check": "pnpm audit --prod --audit-level high", "format": "prettier --write \"**/*.{vue,js,mjs,ts,d.ts}\" --cache", diff --git a/packages/nuxt-module/src/module.ts b/packages/nuxt-module/src/module.ts index f27606a30..15d6fe0aa 100644 --- a/packages/nuxt-module/src/module.ts +++ b/packages/nuxt-module/src/module.ts @@ -21,6 +21,7 @@ export default defineNuxtModule({ //cssLayerOrder: undefined, importPT: undefined, importTheme: undefined, + loadStyles: true, options: {}, components: { prefix: '', @@ -47,7 +48,7 @@ export default defineNuxtModule({ const resolver = createResolver(import.meta.url); const registered = register(moduleOptions); - const { autoImport, importPT, importTheme, options } = moduleOptions; + const { autoImport, importPT, importTheme, options, loadStyles } = moduleOptions; const hasTheme = (importTheme || options?.theme) && !options?.unstyled; nuxt.options.runtimeConfig.public.primevue = { @@ -84,6 +85,8 @@ export default defineNuxtModule({ } const styleContent = () => { + if (!loadStyles) return `export const styles = [], stylesToTop = [], themes = [];`; + const uniqueRegisteredStyles = Array.from(new Map(registeredStyles?.map((m: MetaType) => [m.name, m])).values()); return ` @@ -102,11 +105,11 @@ const { options = {} } = config; const stylesToTop = [${registered.injectStylesAsStringToTop.join('')}].join(''); const styleProps = { - ${options?.csp?.nonce ? `nonce: ${options?.csp?.nonce}` : ''} + ${options?.csp?.nonce ? `nonce: ${options?.csp?.nonce}` : ''} } const styles = [ - ${registered.injectStylesAsString.join('')}, - ${uniqueRegisteredStyles?.map((item: MetaType) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')} + ${registered.injectStylesAsString.join('')}, + ${uniqueRegisteredStyles?.map((item: MetaType) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')} ].join(''); ${hasTheme ? `Theme.setTheme(${importTheme?.as} || options?.theme)` : ''} diff --git a/packages/nuxt-module/src/types.d.ts b/packages/nuxt-module/src/types.d.ts index 0d91f4547..ad9ac2b99 100644 --- a/packages/nuxt-module/src/types.d.ts +++ b/packages/nuxt-module/src/types.d.ts @@ -14,6 +14,7 @@ export interface ModuleOptions { /*cssLayerOrder?: string;*/ importPT?: ImportOptions; importTheme?: ImportOptions; + loadStyles?: boolean; options?: PrimeVueOptions; components?: ConstructsType; directives?: ConstructsType;