Skip to content

Commit 30bfa9a

Browse files
Szymon-dziewonskiSzymon-dziewonski
authored
chore: migrate nuxt module to HMR version (#3232)
1 parent 784f617 commit 30bfa9a

File tree

9 files changed

+1724
-952
lines changed

9 files changed

+1724
-952
lines changed

‎.changeset/khaki-trains-buy.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@storefront-ui/nuxt': patch
3+
---
4+
5+
[CHANGED] Migrate nuxt module to newest version `@nuxtjs/[email protected]` enabling HMR

‎apps/docs/components/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@
1616
"@microsoft/api-documenter": "^7.25.9",
1717
"@microsoft/api-extractor": "^7.47.4",
1818
"@types/node": "^20.12.7",
19-
"nuxt": "^3.12.4",
20-
"nuxt-gtag": "^2.1.0"
19+
"nuxt": "^3.13.2",
20+
"nuxt-gtag": "^3.0.1"
2121
},
2222
"dependencies": {
2323
"@microsoft/api-extractor-model": "^7.29.4",

‎apps/preview/nuxt/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
"autoprefixer": "^10.4.19",
3030
"eslint": "^8.34.0",
3131
"eslint-plugin-nuxt": "^4.0.0",
32-
"nuxt": "^3.12.4",
32+
"nuxt": "^3.13.2",
3333
"postcss": "^8.4.21",
3434
"prettier": "^3.0.0",
3535
"sass": "^1.77.8",

‎packages/sfui/frameworks/nuxt/package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,16 +39,16 @@
3939
"lint:fix": "eslint --fix --ext .vue,.js,.ts ."
4040
},
4141
"dependencies": {
42-
"@nuxt/kit": "^3.11.2",
42+
"@nuxt/kit": "^3.13.2",
4343
"@nuxtjs/tailwindcss": "^6.12.1",
4444
"@storefront-ui/vue": "workspace:*",
4545
"defu": "^6.1.4"
4646
},
4747
"devDependencies": {
48-
"@nuxt/module-builder": "^0.7.0",
49-
"@nuxt/schema": "^3.11.2",
48+
"@nuxt/module-builder": "^0.8.4",
49+
"@nuxt/schema": "^3.13.2",
5050
"@storefront-ui/eslint-config": "workspace:*",
5151
"eslint": "^8.34.0",
52-
"nuxt": "^3.12.4"
52+
"nuxt": "^3.13.2"
5353
}
5454
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const { isOpen, toggle } = useDisclosure();
44

55
<template>
66
<div>
7-
<div class="bg-brand prose lg:prose-xl">You can use Tailwind colors!</div>
7+
<div class="bg-brand text-secondary-200 prose lg:prose-xl">You can use Tailwind colors!</div>
88
<div v-if="isOpen">hello</div>
99
<SfButton @click="toggle()">Toggle</SfButton>
1010
</div>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
11
import { defineNuxtConfig } from 'nuxt/config';
22

3+
// How to test? check if variable is overwritten with current priority table
4+
// 1. `tailwind.config.ts` file
5+
// 2. `nuxt.config.ts` file with `tailwindcss` property
6+
// 3. default configuration inside module
37
export default defineNuxtConfig({
48
modules: ['../src/module.ts'],
59
// modules: ['../dist/module.mjs'], //For testing bundle
@@ -9,6 +13,9 @@ export default defineNuxtConfig({
913
extend: {
1014
colors: {
1115
brand: 'red',
16+
secondary: {
17+
200: 'green',
18+
},
1219
},
1320
},
1421
},

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,16 @@
1+
// How to test? check if variable is overwritten with current priority table
2+
// 1. `tailwind.config.ts` file
3+
// 2. `nuxt.config.ts` file with `tailwindcss` property
4+
// 3. default configuration inside module
15
export default {
26
content: ['../../../../node_modules/@storefront-ui/vue/**/*.{js,mjs}'],
37
theme: {
48
extend: {
59
colors: {
610
brand: 'yellow',
11+
secondary: {
12+
200: 'blue',
13+
},
714
},
815
},
916
},

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

Lines changed: 18 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-
import { defineNuxtModule, addComponent, addImportsSources, installModule } from '@nuxt/kit';
1+
import { defineNuxtModule, addComponent, addImportsSources, installModule, addTemplate } from '@nuxt/kit';
22
import * as storefrontUi from '@storefront-ui/vue';
33
import { defu } from 'defu';
4-
import { tailwindConfig } from '@storefront-ui/vue/tailwind-config';
5-
import { type Config } from 'tailwindcss';
6-
import type { NuxtOptions } from '@nuxt/schema';
4+
import { join } from 'node:path';
5+
import '@nuxtjs/tailwindcss';
76

87
// Module options TypeScript interface definition
98
export interface ModuleOptions {
@@ -24,33 +23,24 @@ export default defineNuxtModule<ModuleOptions>({
2423
},
2524
async setup(options, nuxt) {
2625
const { contentPath } = options;
27-
const nuxtOptions = nuxt.options;
2826

29-
const defaultTailwindConfig: Config = {
30-
presets: [tailwindConfig],
31-
content: [contentPath ?? ''],
32-
};
33-
34-
const nuxtConfigTailwindConfig = structuredClone(nuxtOptions.tailwindcss?.config);
35-
36-
nuxt.hook('tailwindcss:config', function (tailwindFileConfig) {
37-
// tailwindFileConfig are data coming from tailwind.config.ts
38-
// priority
39-
// 1. tailwind.config
40-
// 2. nuxt.config
41-
// 3. default config
42-
const mergeDefaultWithNuxtConfig = defu(nuxtConfigTailwindConfig, defaultTailwindConfig);
43-
Object.assign(tailwindFileConfig, defu(tailwindFileConfig, mergeDefaultWithNuxtConfig));
27+
const customTailwindConfigTemplate = addTemplate({
28+
filename: 'storefront-ui.tailwind-config.mjs',
29+
write: true,
30+
getContents: () =>
31+
`import { tailwindConfig } from '@storefront-ui/vue/tailwind-config'; export default { presets: [tailwindConfig] }`,
4432
});
4533

46-
nuxtOptions.tailwindcss = {
47-
config: {
48-
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.
49-
// TODO: on 6.12.1 should be fixed https://github.com/nuxt-modules/tailwindcss/blob/main/src/context.ts#L87
50-
},
51-
} as unknown as NuxtOptions['tailwindcss'];
52-
53-
await installModule('@nuxtjs/tailwindcss');
34+
await installModule(
35+
'@nuxtjs/tailwindcss',
36+
defu(
37+
{
38+
configPath: [customTailwindConfigTemplate.dst, join(nuxt.options.rootDir, 'tailwind.config')],
39+
config: { content: [contentPath ?? ''] },
40+
},
41+
nuxt.options.tailwindcss,
42+
),
43+
);
5444

5545
const components: string[] = [];
5646
const composables: string[] = [];

0 commit comments

Comments
 (0)