chore: migrate nuxt module to HMR version (#3232)

.changeset/khaki-trains-buy.md

@@ -0,0 +1,5 @@
+---
+'@storefront-ui/nuxt': patch
+---
+
+[CHANGED] Migrate nuxt module to newest version `@nuxtjs/[email protected]` enabling HMR

apps/docs/components/package.json

@@ -16,8 +16,8 @@
     "@microsoft/api-documenter": "^7.25.9",
     "@microsoft/api-extractor": "^7.47.4",
     "@types/node": "^20.12.7",
-    "nuxt": "^3.12.4",
-    "nuxt-gtag": "^2.1.0"
+    "nuxt": "^3.13.2",
+    "nuxt-gtag": "^3.0.1"
   },
   "dependencies": {
     "@microsoft/api-extractor-model": "^7.29.4",

apps/preview/nuxt/package.json

@@ -29,7 +29,7 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.34.0",
     "eslint-plugin-nuxt": "^4.0.0",
-    "nuxt": "^3.12.4",
+    "nuxt": "^3.13.2",
     "postcss": "^8.4.21",
     "prettier": "^3.0.0",
     "sass": "^1.77.8",

packages/sfui/frameworks/nuxt/package.json

@@ -39,16 +39,16 @@
     "lint:fix": "eslint --fix --ext .vue,.js,.ts ."
   },
   "dependencies": {
-    "@nuxt/kit": "^3.11.2",
+    "@nuxt/kit": "^3.13.2",
     "@nuxtjs/tailwindcss": "^6.12.1",
     "@storefront-ui/vue": "workspace:*",
     "defu": "^6.1.4"
   },
   "devDependencies": {
-    "@nuxt/module-builder": "^0.7.0",
-    "@nuxt/schema": "^3.11.2",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.13.2",
     "@storefront-ui/eslint-config": "workspace:*",
     "eslint": "^8.34.0",
-    "nuxt": "^3.12.4"
+    "nuxt": "^3.13.2"
   }
 }

packages/sfui/frameworks/nuxt/playground/app.vue

@@ -4,7 +4,7 @@ const { isOpen, toggle } = useDisclosure();
 
 <template>
   <div>
-    <div class="bg-brand prose lg:prose-xl">You can use Tailwind colors!</div>
+    <div class="bg-brand text-secondary-200 prose lg:prose-xl">You can use Tailwind colors!</div>
     <div v-if="isOpen">hello</div>
     <SfButton @click="toggle()">Toggle</SfButton>
   </div>

packages/sfui/frameworks/nuxt/playground/nuxt.config.ts

@@ -1,5 +1,9 @@
 import { defineNuxtConfig } from 'nuxt/config';
 
+// How to test? check if variable is overwritten with current priority table
+// 1. `tailwind.config.ts` file
+// 2. `nuxt.config.ts` file with `tailwindcss` property
+// 3. default configuration inside module
 export default defineNuxtConfig({
   modules: ['../src/module.ts'],
   // modules: ['../dist/module.mjs'], //For testing bundle
@@ -9,6 +13,9 @@ export default defineNuxtConfig({
         extend: {
           colors: {
             brand: 'red',
+            secondary: {
+              200: 'green',
+            },
           },
         },
       },

packages/sfui/frameworks/nuxt/playground/tailwind.config.ts

@@ -1,9 +1,16 @@
+// How to test? check if variable is overwritten with current priority table
+// 1. `tailwind.config.ts` file
+// 2. `nuxt.config.ts` file with `tailwindcss` property
+// 3. default configuration inside module
 export default {
   content: ['../../../../node_modules/@storefront-ui/vue/**/*.{js,mjs}'],
   theme: {
     extend: {
       colors: {
         brand: 'yellow',
+        secondary: {
+          200: 'blue',
+        },
       },
     },
   },

packages/sfui/frameworks/nuxt/src/module.ts

@@ -1,9 +1,8 @@
-import { defineNuxtModule, addComponent, addImportsSources, installModule } from '@nuxt/kit';
+import { defineNuxtModule, addComponent, addImportsSources, installModule, addTemplate } from '@nuxt/kit';
 import * as storefrontUi from '@storefront-ui/vue';
 import { defu } from 'defu';
-import { tailwindConfig } from '@storefront-ui/vue/tailwind-config';
-import { type Config } from 'tailwindcss';
-import type { NuxtOptions } from '@nuxt/schema';
+import { join } from 'node:path';
+import '@nuxtjs/tailwindcss';
 
 // Module options TypeScript interface definition
 export interface ModuleOptions {
@@ -24,33 +23,24 @@ export default defineNuxtModule<ModuleOptions>({
   },
   async setup(options, nuxt) {
     const { contentPath } = options;
-    const nuxtOptions = nuxt.options;
 
-    const defaultTailwindConfig: Config = {
-      presets: [tailwindConfig],
-      content: [contentPath ?? ''],
-    };
-
-    const nuxtConfigTailwindConfig = structuredClone(nuxtOptions.tailwindcss?.config);
-
-    nuxt.hook('tailwindcss:config', function (tailwindFileConfig) {
-      // tailwindFileConfig are data coming from tailwind.config.ts
-      // priority
-      // 1. tailwind.config
-      // 2. nuxt.config
-      // 3. default config
-      const mergeDefaultWithNuxtConfig = defu(nuxtConfigTailwindConfig, defaultTailwindConfig);
-      Object.assign(tailwindFileConfig, defu(tailwindFileConfig, mergeDefaultWithNuxtConfig));
+    const customTailwindConfigTemplate = addTemplate({
+      filename: 'storefront-ui.tailwind-config.mjs',
+      write: true,
+      getContents: () =>
+        `import { tailwindConfig } from '@storefront-ui/vue/tailwind-config'; export default { presets: [tailwindConfig] }`,
     });
 
-    nuxtOptions.tailwindcss = {
-      config: {
-        plugins: [() => {}], // DO NOT REMOVE/HACK - this property need to exists otherwise whole plugin won't work. Reason is that if there is no plugin set by default, tailwind on nuxt create template inside `.nuxt` directory that is reused later. Tailwind cant do it, because then it stringify plugins that contains functions to `plugins: [null, null]` which means any plugin we load thorugh our preset won't work. https://github.com/nuxt-modules/tailwindcss/blob/fb8fafb98cbf3ea824a1645156d6484ff6c5eda1/src/context.ts#L47. There is switch if there is no `plugins` property on initial load, config is generated, so any plugin cannot be added.
-        // TODO: on 6.12.1 should be fixed https://github.com/nuxt-modules/tailwindcss/blob/main/src/context.ts#L87
-      },
-    } as unknown as NuxtOptions['tailwindcss'];
-
-    await installModule('@nuxtjs/tailwindcss');
+    await installModule(
+      '@nuxtjs/tailwindcss',
+      defu(
+        {
+          configPath: [customTailwindConfigTemplate.dst, join(nuxt.options.rootDir, 'tailwind.config')],
+          config: { content: [contentPath ?? ''] },
+        },
+        nuxt.options.tailwindcss,
+      ),
+    );
 
     const components: string[] = [];
     const composables: string[] = [];