Skip to content

Commit 2a77bee

Browse files
Szymon-dziewonskiSzymon-dziewonski
authored
Merge pull request #3162 from vuestorefront/v2-release/nuxt-2.5.0
chore: release/nuxt 2.5.0
2 parents 9b0c21e + 9ad0085 commit 2a77bee

File tree

21 files changed

+324
-225
lines changed

21 files changed

+324
-225
lines changed

‎.yarn/patches/@nuxt-module-builder-npm-0.6.0-755acb37c3.patch

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
diff --git a/dist/chunks/build.mjs b/dist/chunks/build.mjs
2+
index 103067eb77b600e58143d0f1ab9eeb570a882af5..b88a7d7d435df0c1348a1ec821fbdcb16340f9c6 100644
3+
--- a/dist/chunks/build.mjs
4+
+++ b/dist/chunks/build.mjs
5+
@@ -1,6 +1,7 @@
6+
import { promises, existsSync } from 'node:fs';
7+
import { pathToFileURL } from 'node:url';
8+
-import { resolve, dirname } from 'pathe';
9+
+import { createRequire } from 'node:module';
10+
+import { resolve, isAbsolute } from 'pathe';
11+
import { readPackageJSON, readTSConfig } from 'pkg-types';
12+
import { defu } from 'defu';
13+
import { consola } from 'consola';
14+
@@ -210,7 +211,24 @@ async function loadTSCompilerOptions(path) {
15+
});
16+
}
17+
const files = Array.isArray(config.extends) ? config.extends : config.extends ? [config.extends] : [];
18+
- return defu(config.compilerOptions, ...await Promise.all(files.map((file) => loadTSCompilerOptions(dirname(resolve(path, file))))));
19+
+ return defu(config.compilerOptions, ...await Promise.all(files.map((file) => loadTSCompilerOptions(resolveExtends(file, path)))));
20+
}
21+
22+
+function resolveExtends(extended, from) {
23+
+ // see https://github.com/dominikg/tsconfck/issues/149
24+
+ if (extended === '..') extended = '../tsconfig.json';
25+
+ const req = createRequire(from);
26+
+ let error;
27+
+ try {
28+
+ return req.resolve(extended);
29+
+ } catch (e) {
30+
+ error = e;
31+
+ }
32+
+ if (extended[0] !== '.' && !isAbsolute(extended)) {
33+
+ return req.resolve(`${extended}/tsconfig.json`);
34+
+ }
35+
+
36+
+ throw error;
37+
+ }
38+
+
39+
export { build as default };

‎apps/docs/components/content/2.getting-started/vue.md

Lines changed: 17 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ You can try out Storefront UI in your browser with our online playground.
1313
<a href="http://play-vue.vuestorefront.io/" target="_blank" rel="noopener noreferrer" class="custom-block dark:text-white font-medium px-4 py-2 border-green border-2 rounded-lg hover:bg-green transition-colors hover:text-white">Stackblitz playground</a>
1414
</div>
1515

16-
1716
::tabs{:titles='["Vite", "Nuxt", "Astro"]' class="mt-8"}
1817

1918
#tab-1
@@ -90,7 +89,6 @@ export default {
9089

9190
Finally, you'll need to add CSS directives to add each Tailwind layer to `src/style.css`. Since Storefront UI fits into your Tailwind workflow, you'll need to add Tailwind's base, components, and utilities layers to your CSS.
9291

93-
9492
```css
9593
/* src/style.css */
9694
@tailwind base;
@@ -102,89 +100,78 @@ Finally, you'll need to add CSS directives to add each Tailwind layer to `src/st
102100

103101
Now, you can import Storefront UI components in your app and all the Tailwind utilities from the `@storefront-ui/vue` library will be available in your project.
104102

105-
106-
107103
<<<../../../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue
108104

109-
110-
111105
<Showcase showcase-name="Button/ButtonBlock" :show-source="false"/>
112106

113107
#tab-2
114108

115109
## Nuxt 3
116110

117-
If you prefer video guides, we have a quick video that can help you set up Storefront UI in your Nuxt 3 project.
118-
119-
<iframe src="https://www.youtube-nocookie.com/embed/YamdPmZexto" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen" class="w-full max-w-lg mx-auto rounded aspect-video relative mt-8 custom-block"></iframe>
120-
121111
### Install all dependencies
122112

123-
With Nuxt 3, the fastest way to get started is to use the `@nuxtjs/tailwindcss` module. The [Nuxt Tailwind module](https://tailwindcss.nuxtjs.org/) will automatically install Tailwind CSS and PostCSS for you.
124-
125-
Additionally, you'll need to install the Storefront UI's Vue library and Tailwind preset.
113+
With Nuxt 3, the fastest way to get started is to use the `@storefront-ui/nuxt` module. The [Storefront-io Nuxt module](https://www.npmjs.com/package/@storefront-ui/nuxt) will automatically install `@nuxtjs/tailwindcss` inside `nuxt` and storefront-ui tailwindcss presets.
126114

127115
```bash
128116
# npm
129-
npm i -D @nuxtjs/tailwindcss @storefront-ui/vue
117+
npm i -D @storefront-ui/nuxt
130118

131119
# yarn
132-
yarn add -D @nuxtjs/tailwindcss @storefront-ui/vue
120+
yarn add -D @storefront-ui/nuxt
133121

134122
# pnpm
135-
pnpm add -D @nuxtjs/tailwindcss @storefront-ui/vue
123+
pnpm add -D @storefront-ui/nuxt
136124
```
137125

138126
### Add the Nuxt Tailwind module to your `nuxt.config.ts`
139127

140128
```ts
141129
// nuxt.config.ts
142130
export default defineNuxtConfig({
143-
modules: ['@nuxtjs/tailwindcss']
131+
modules: ['@storefront-ui/nuxt']
144132
})
145133
```
146134

147-
### Modify your `tailwind.config.ts`
135+
### Tailwind configuration
148136

149-
Storefront UI plugs into your Tailwind configuration to add any base styles and CSS variables. To do this, you need to import the Storefront UI Tailwind preset and add it to your `tailwind.config.ts` file.
137+
Since we use `@nuxtjs/tailwindcss` under the hood, there is possibility to use `tailwindcss` property in `nuxt.config.ts` file. Other than that there is default `tailwind` way to create config via `tailwind.config.ts` file.
150138

151-
::tip Add a path to your installed package
139+
Internally, `@nuxtjs/tailwindcss` will merge the three places that you can add configurations. In order of priority, the options are:
152140

141+
1. `tailwind.config.ts` file
142+
2. `nuxt.config.ts` file with `tailwindcss` property
143+
3. Storefront UI [default configuration](https://github.com/vuestorefront/storefront-ui/blob/v2-develop/packages/config/tailwind/index.ts)
144+
145+
::tip Add a path to your installed package
153146
In order for Tailwind to properly detect the utility classes used in Storefront UI components, you need to add a path to wherever your `node_modules` folder is located to the `content` property. In the example below, we're using the default location for `node_modules`, but this may change if you're working in a monorepo.
154147
::
155148

156149
```ts
157150
// tailwind.config.ts
158151
import type { Config } from 'tailwindcss';
159-
import { tailwindConfig } from '@storefront-ui/vue/tailwind-config';
160152

161153
export default <Config>{
162-
presets: [tailwindConfig],
163154
content: ['./**/*.vue', './node_modules/@storefront-ui/vue/**/*.{js,mjs}'],
164155
};
165156
```
166-
### Add Tailwind to Your CSS
167157

168-
Finally, you'll need to add CSS directives to add each Tailwind layer to `src/style.css`. Since Storefront UI fits into your Tailwind workflow, you'll need to add Tailwind's base, components, and utilities layers to your CSS.
158+
### Custom `tailwind.css` file
169159

160+
If you're going to create your own Tailwind CSS file, make sure to add the @tailwind directives for each of Tailwind’s layer types (base, components, and utilities).
170161

171162
```css
172-
/* src/style.css */
163+
/* ~/assets/css/tailwind.css */
173164
@tailwind base;
174165
@tailwind components;
175166
@tailwind utilities;
176167
```
177168

178169
### You're ready to go
179170

180-
Now, you can import Storefront UI components in your app and all the Tailwind utilities from the `@storefront-ui/vue` library will be available in your project.
181-
182-
171+
Now, you can import Storefront UI components in your app and all the Tailwind utilities from the `@storefront-ui/vue` library will be available in your project. Because `storefront-ui` is served as well from module, `@storefront-ui/vue` is available from [Nuxt autoimport](https://nuxt.com/docs/guide/concepts/auto-imports).
183172

184173
<<<../../../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue
185174

186-
187-
188175
<Showcase showcase-name="Button/ButtonBlock" :show-source="false"/>
189176

190177
#tab-3
@@ -253,7 +240,6 @@ module.exports = {
253240

254241
Finally, you'll need to add CSS directives to add each Tailwind layer to `src/style.css`. Since Storefront UI fits into your Tailwind workflow, you'll need to add Tailwind's base, components, and utilities layers to your CSS.
255242

256-
257243
```css
258244
/* src/style.css */
259245
@tailwind base;
@@ -265,14 +251,8 @@ Finally, you'll need to add CSS directives to add each Tailwind layer to `src/st
265251

266252
You can now import Storefront UI components inside your Astro project! You can either use them directly in your Astro components or import them into your Vue components.
267253

268-
269-
270254
<<<../../../../preview/nuxt/pages/showcases/Button/ButtonBlock.vue
271255

272-
273-
274-
275-
276256
```md
277257
---
278258
import { SfButton } from '@storefront-ui/vue';
@@ -281,8 +261,6 @@ import { SfButton } from '@storefront-ui/vue';
281261
<SfButton> Hello </SfButton>
282262
```
283263

284-
285-
286264
::tip Need interaction?
287265
If you need interaction, you can create your own Vue components that use Storefront UI components under the hood. You can then import these components into your Astro components and use them as you would any other Vue component. Read more about Vue components in Astro in Astro's [Framework Components guide](https://docs.astro.build/en/core-concepts/framework-components/).
288266
::

‎apps/docs/components/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
},
1515
"devDependencies": {
1616
"@microsoft/api-documenter": "^7.24.2",
17-
"@microsoft/api-extractor": "7.43.1",
17+
"@microsoft/api-extractor": "7.43.4",
1818
"@types/node": "^20.12.7",
1919
"nuxt": "^3.11.2",
2020
"nuxt-gtag": "^2.0.5"

‎apps/preview/nuxt/nuxt.config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export default defineNuxtConfig({
8080
},
8181
],
8282
},
83-
modules: ['@nuxtjs/tailwindcss'],
83+
modules: ['@storefront-ui/nuxt'],
8484
css: ['@storefront-ui/example-style/index.scss', '@storefront-ui/example-style/controls.scss'],
8585
imports: {
8686
transform: {

‎apps/preview/nuxt/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@nuxtjs/tailwindcss": "^6.12.0",
1919
"@storefront-ui/eslint-config": "workspace:*",
2020
"@storefront-ui/example-style": "workspace:*",
21+
"@storefront-ui/nuxt": "workspace:*",
2122
"@storefront-ui/shared": "workspace:*",
2223
"@storefront-ui/tw-plugin-peer-next": "workspace:*",
2324
"@storefront-ui/typography": "workspace:*",

‎apps/preview/nuxt/tailwind.config.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { Config } from 'tailwindcss';
22
import sfTypography from '@storefront-ui/typography';
33
import { tailwindConfig } from '@storefront-ui/vue/tailwind-config';
4-
import tailwindTypography from '@tailwindcss/typography';
54

65
export default <Config>{
76
presets: [tailwindConfig],
@@ -13,5 +12,5 @@ export default <Config>{
1312
},
1413
},
1514
},
16-
plugins: [sfTypography, tailwindTypography],
15+
plugins: [sfTypography],
1716
};

‎package.json

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,17 +24,17 @@
2424
"dev": "yarn update-browserlist-db && yarn build:typography && yarn build:peer-next && yarn build:tailwind-config && yarn build:test-utils && yarn build:react && turbo run dev --parallel",
2525
"dev:shared": "turbo run dev:shared",
2626
"update-browserlist-db": "yarn dlx browserslist@latest",
27-
"lint": "yarn build:typography && yarn build:peer-next && yarn build:tailwind-config && turbo run lint",
27+
"lint": "yarn build:typography && yarn build:peer-next && yarn build:tailwind-config && yarn build:vue && turbo run lint",
2828
"lint:fix": "turbo run lint:fix",
2929
"lint:fix:sfui": "turbo run lint:fix:sfui",
3030
"build:docs": "yarn build:peer-next && turbo run build:docs",
3131
"build:next": "turbo run build:next",
32-
"build:nuxt": "turbo run build:nuxt",
32+
"build:nuxt": "turbo run build:nuxt-module && turbo run build:nuxt",
3333
"build:replace-assets-url-with": "frs-replace \"http:\\/\\/localhost:3100\\/@assets\\/\" \"https://storage.googleapis.com/sfui_docs_artifacts_bucket_public/$ENV_NAME/\" -i \"apps/preview/*/pages/**/*\" -s \"preserve-structure\" -o .",
3434
"build:nuxt-module": "turbo run build:nuxt-module",
3535
"build:react": "turbo run build:react",
3636
"build:vue": "turbo run build:vue",
37-
"build:release": "turbo run build:release",
37+
"build:release": "turbo run build:release && turbo run build:nuxt-module",
3838
"build:tailwind-config": "turbo run build:tailwind-config",
3939
"build:typography": "turbo run build:typography",
4040
"build:peer-next": "turbo run build:peer-next",
@@ -88,6 +88,7 @@
8888
}
8989
},
9090
"resolutions": {
91-
"@changesets/assemble-release-plan@^6.0.0": "patch:@changesets/assemble-release-plan@npm%3A6.0.0#./.yarn/patches/@changesets-assemble-release-plan-npm-6.0.0-f7b3005037.patch"
91+
"@changesets/assemble-release-plan@^6.0.0": "patch:@changesets/assemble-release-plan@npm%3A6.0.0#./.yarn/patches/@changesets-assemble-release-plan-npm-6.0.0-f7b3005037.patch",
92+
"@nuxt/module-builder@^0.6.0": "patch:@nuxt/module-builder@npm%3A0.6.0#./.yarn/patches/@nuxt-module-builder-npm-0.6.0-755acb37c3.patch"
9293
}
9394
}

‎packages/sfui/frameworks/nuxt/.eslintignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
.output
3+
playground
4+
playground/**
5+
dist
6+
.eslintrc.cjs

‎packages/sfui/frameworks/nuxt/.eslintrc.cjs

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
module.exports = {
2+
extends: ['plugin:nuxt/recommended', '@storefront-ui/eslint-config/vue.js'],
3+
parserOptions: {
4+
project: 'tsconfig.json',
5+
tsconfigRootDir: __dirname,
6+
sourceType: 'module',
7+
},
8+
};

‎packages/sfui/frameworks/nuxt/CHANGELOG.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
11
# @storefront-ui/nuxt
22

3+
## 2.5.0
4+
5+
### Minor Changes
6+
7+
- [#3155](https://github.com/vuestorefront/storefront-ui/pull/3155) [`a754c14`](https://github.com/vuestorefront/storefront-ui/commit/a754c147597bdc9a5af9fb635d59add8873f7178) Thanks [@Szymon-dziewonski](https://github.com/Szymon-dziewonski)! - [FIXED] `nuxt` module package is working, installation documentation of storefront-ui on nuxt is set to use module by default, add `eslint` lint, add `README.md` file. Previously nuxt module on npm contained only `CHANGELOG.md` and `package.json` files.
8+
9+
## 2.5.0-rc.0
10+
11+
### Minor Changes
12+
13+
- [#3155](https://github.com/vuestorefront/storefront-ui/pull/3155) [`a754c14`](https://github.com/vuestorefront/storefront-ui/commit/a754c147597bdc9a5af9fb635d59add8873f7178) Thanks [@Szymon-dziewonski](https://github.com/Szymon-dziewonski)! - [FIXED] `nuxt` module package is working, installation documentation of storefront-ui on nuxt is set to use module by default, add `eslint` lint, add `README.md` file. Previously nuxt module on npm contained only `CHANGELOG.md` and `package.json` files.
14+
315
## 2.4.6
416

517
### Patch Changes

0 commit comments

Comments
 (0)