Added hot dev mode

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: {

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 });
+    }
 });

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",

packages/nuxt-module/src/module.ts

@@ -21,6 +21,7 @@ export default defineNuxtModule<ModuleOptions>({
         //cssLayerOrder: undefined,
         importPT: undefined,
         importTheme: undefined,
+        loadStyles: true,
         options: {},
         components: {
             prefix: '',
@@ -47,7 +48,7 @@ export default defineNuxtModule<ModuleOptions>({
 
         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<ModuleOptions>({
         }
 
         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)` : ''}

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;