Fixed #5945 - CSS not Server Side Rendered with PrimeVue 4 / Nuxt 3

primefaces · Jun 24, 2024 · be18995 · be18995
1 parent f40130a
commit be18995
Show file tree

Hide file tree

Showing 4 changed files with 539 additions and 434 deletions.
diff --git a/packages/nuxt-module/package.json b/packages/nuxt-module/package.json
@@ -80,9 +80,10 @@
         "changelogen": "^0.5.5",
         "nitropack": "^2.6.3",
         "nuxt": "3.3.2",
-        "vitest": "^1.6.0"
+        "vitest": "^1.6.0",
+        "@primevue/themes": "workspace:*"
     },
     "engines": {
         "node": ">=12.11.0"
     }
-}
+}
diff --git a/packages/nuxt-module/playground/nuxt.config.ts b/packages/nuxt-module/playground/nuxt.config.ts
@@ -1,10 +1,16 @@
+// @ts-ignore
+import Aura from '@primevue/themes/aura';
+
 export default defineNuxtConfig({
     modules: ['../src/module'],
     primevue: {
         usePrimeVue: true,
         options: {
             // ripple, inputStyle etc.
             ripple: true,
+            theme: {
+                preset: Aura
+            },
             pt: {
                 panel: {
                     header: 'my-panel-header'

diff --git a/packages/nuxt-module/src/module.ts b/packages/nuxt-module/src/module.ts
@@ -48,7 +48,7 @@ export default defineNuxtModule<ModuleOptions>({
         const resolver = createResolver(import.meta.url);
         const registered = register(moduleOptions);
         const { autoImport, importPT, importTheme, options } = moduleOptions;
-        const hasTheme = importTheme && !options?.unstyled;
+        const hasTheme = (importTheme || options?.theme) && !options?.unstyled;
 
         nuxt.options.runtimeConfig.public.primevue = {
             ...moduleOptions,
@@ -87,14 +87,19 @@ export default defineNuxtModule<ModuleOptions>({
             const uniqueRegisteredStyles = Array.from(new Map(registeredStyles?.map((m: MetaType) => [m.name, m])).values());
 
             return `
+import { useRuntimeConfig } from '#imports';
 ${uniqueRegisteredStyles?.map((style: MetaType) => `import ${style.as} from '${style.from}';`).join('\n')}
 ${
     hasTheme
         ? `import { Theme } from '@primeuix/styled';
-import ${importTheme.as} from '${normalize(importTheme.from)}';\n`
+${importTheme ? `import ${importTheme.as} from '${normalize(importTheme.from)}';\n` : ''}`
         : ''
 }
 
+const runtimeConfig = useRuntimeConfig();
+const config = runtimeConfig?.public?.primevue ?? {};
+const { options = {} } = config;
+
 const stylesToTop = [${registered.injectStylesAsStringToTop.join('')}].join('');
 const styleProps = {
   ${options?.csp?.nonce ? `nonce: ${options?.csp?.nonce}` : ''}
@@ -104,7 +109,7 @@ const styles = [
   ${uniqueRegisteredStyles?.map((item: MetaType) => `${item.as} && ${item.as}.getStyleSheet ? ${item.as}.getStyleSheet(undefined, styleProps) : ''`).join(',')}
 ].join('');
 
-${hasTheme ? `Theme.setTheme(${importTheme.as})` : ''}
+${hasTheme ? `Theme.setTheme(${importTheme?.as} || options?.theme)` : ''}
 
 const themes = [
     ${`${uniqueRegisteredStyles?.[0].as} && ${uniqueRegisteredStyles?.[0].as}.getCommonThemeStyleSheet ? ${uniqueRegisteredStyles?.[0].as}.getCommonThemeStyleSheet(undefined, styleProps) : ''`},
@@ -131,14 +136,14 @@ ${registered.config.map((config: MetaType) => `import ${config.as} from '${confi
 ${registered.services.map((service: MetaType) => `import ${service.as} from '${service.from}';`).join('\n')}
 ${!autoImport && registered.directives.map((directive: MetaType) => `import ${directive.as} from '${directive.from}';`).join('\n')}
 ${importPT ? `import ${importPT.as} from '${normalize(importPT.from)}';\n` : ''}
-${hasTheme ? `import ${importTheme.as} from '${normalize(importTheme.from)}';\n` : ''}
+${hasTheme && importTheme ? `import ${importTheme.as} from '${normalize(importTheme.from)}';\n` : ''}
 
 export default defineNuxtPlugin(({ vueApp }) => {
   const runtimeConfig = useRuntimeConfig();
   const config = runtimeConfig?.public?.primevue ?? {};
   const { usePrimeVue = true, options = {} } = config;
   const pt = ${importPT ? `{ pt: ${importPT.as} }` : `{}`};
-  const theme = ${hasTheme ? `{ theme: ${importTheme.as} }` : `{}`};
+  const theme = ${hasTheme ? `{ theme: ${importTheme?.as} || options?.theme }` : `{}`};
 
   usePrimeVue && vueApp.use(PrimeVue, { ...options, ...pt, ...theme });
   ${registered.services.map((service: MetaType) => `vueApp.use(${service.as});`).join('\n')}