diff --git a/.vscode/settings.json b/.vscode/settings.json index eb8204b6..0f915fdc 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,4 @@ { - "eslint.experimental.useFlatConfig": true + "eslint.experimental.useFlatConfig": true, + "cSpell.words": ["nuxt", "ofetch"] } diff --git a/examples/showcase/README.md b/examples/showcase/README.md index 3bd3f2d5..da8a5954 100644 --- a/examples/showcase/README.md +++ b/examples/showcase/README.md @@ -6,6 +6,10 @@ This example shows how to use various Nuxt features and modules in combination w - Add Nuxt pages to Storybook +## Modules + +- [Nuxt Image](https://image.nuxt.com) + --- Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. diff --git a/packages/storybook-addon/playground/stories/NuxtImage.stories.ts b/examples/showcase/components/NuxtImage.stories.ts similarity index 80% rename from packages/storybook-addon/playground/stories/NuxtImage.stories.ts rename to examples/showcase/components/NuxtImage.stories.ts index b60d92fb..4cf0ccb7 100644 --- a/packages/storybook-addon/playground/stories/NuxtImage.stories.ts +++ b/examples/showcase/components/NuxtImage.stories.ts @@ -1,15 +1,15 @@ import type { Meta, StoryObj } from '@storybook/vue3' -import MyComponent from '~/components/MyNuxtImage.vue' +import NuxtImageComponent from './NuxtImage.vue' // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction const meta = { - title: 'Plugins/NuxtImage', - component: MyComponent, + title: 'Modules/Nuxt Image', + component: NuxtImageComponent, // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs tags: ['autodocs'], -} satisfies Meta +} satisfies Meta export default meta type Story = StoryObj diff --git a/packages/storybook-addon/playground/components/MyNuxtImage.vue b/examples/showcase/components/NuxtImage.vue similarity index 85% rename from packages/storybook-addon/playground/components/MyNuxtImage.vue rename to examples/showcase/components/NuxtImage.vue index 561033d6..55cee421 100644 --- a/packages/storybook-addon/playground/components/MyNuxtImage.vue +++ b/examples/showcase/components/NuxtImage.vue @@ -8,7 +8,7 @@ class="rounded" />
-

responsive image with nuxt-image component:

+

Responsive image with nuxt-image component:

{ data: {}, state: {}, } + // Set $fetch + // based on https://github.com/nuxt/nuxt/blob/356173134280b66c5902e5129d2f5ee73b799352/packages/nuxt/src/core/templates.ts#L390-L403 + if (!globalThis.$fetch) { + globalThis.$fetch = $fetch.create({ + baseURL: '/', + }) + } const nuxt = createNuxtApp({ vueApp, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c75b5d9b..46f29e89 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -80,6 +80,9 @@ importers: examples/showcase: dependencies: + '@nuxt/image': + specifier: ^1.7.0 + version: 1.7.0(ioredis@5.4.1)(magicast@0.3.4)(rollup@4.18.0) nuxt: specifier: ^3.11.2 version: 3.12.1(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.2)(@unocss/reset@0.59.4)(change-case@4.1.2)(encoding@0.1.13)(eslint@9.5.0)(floating-vue@5.2.2(@nuxt/kit@3.12.1(magicast@0.3.4)(rollup@3.29.4))(vue@3.4.29(typescript@5.4.5)))(fuse.js@6.6.2)(ioredis@5.4.1)(magicast@0.3.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.4.5)(unocss@0.59.4(postcss@8.4.38)(rollup@3.29.4)(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1)))(vite@5.3.1(@types/node@20.14.2)(terser@5.31.1)) @@ -1864,6 +1867,10 @@ packages: resolution: {integrity: sha512-IoERLy4+PEA4Vl506QcotcgjfliEE3Wu0fr1A2o6CeQ2uwlX+Ellx065cLMaXDuGFfTXcMBWtrfvSmwA9yra1g==} engines: {node: ^14.16.0 || >=16.11.0} + '@nuxt/image@1.7.0': + resolution: {integrity: sha512-zSj32bLgbV9AvLkLX0pF52J5KBfSyj0eSIdpXCtTJATSZlqgcJigoCvmabC1nbcMIp0SZ29Bu9+acQpGTQKz+g==} + engines: {node: ^14.16.0 || >=16.11.0} + '@nuxt/kit@3.12.1': resolution: {integrity: sha512-PHONuNCMqi3FYp0abgkhF3iH1j6CznJLMLpa8qxDGH532ALDcR1ThxbxytTA3fPiYulG2KenK8jloDfNdXOfCA==} engines: {node: ^14.18.0 || >=16.10.0} @@ -8974,6 +8981,9 @@ packages: vue-component-type-helpers@2.0.21: resolution: {integrity: sha512-3NaicyZ7N4B6cft4bfb7dOnPbE9CjLcx+6wZWAg5zwszfO4qXRh+U52dN5r5ZZfc6iMaxKCEcoH9CmxxoFZHLg==} + vue-component-type-helpers@2.0.22: + resolution: {integrity: sha512-gPr2Ba7efUwy/Vfbuf735bHSVdN4ycoZUCHfypkI33M9DUH+ieRblLLVM2eImccFYaWNWwEzURx02EgoXDBmaQ==} + vue-demi@0.14.8: resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==} engines: {node: '>=12'} @@ -11271,6 +11281,39 @@ snapshots: - supports-color - uWebSockets.js + '@nuxt/image@1.7.0(ioredis@5.4.1)(magicast@0.3.4)(rollup@4.18.0)': + dependencies: + '@nuxt/kit': 3.12.1(magicast@0.3.4)(rollup@4.18.0) + consola: 3.2.3 + defu: 6.1.4 + h3: 1.11.1 + image-meta: 0.2.0 + node-fetch-native: 1.6.4 + ohash: 1.1.3 + pathe: 1.1.2 + std-env: 3.7.0 + ufo: 1.5.3 + optionalDependencies: + ipx: 2.1.0(ioredis@5.4.1) + transitivePeerDependencies: + - '@azure/app-configuration' + - '@azure/cosmos' + - '@azure/data-tables' + - '@azure/identity' + - '@azure/keyvault-secrets' + - '@azure/storage-blob' + - '@capacitor/preferences' + - '@netlify/blobs' + - '@planetscale/database' + - '@upstash/redis' + - '@vercel/kv' + - idb-keyval + - ioredis + - magicast + - rollup + - supports-color + - uWebSockets.js + '@nuxt/kit@3.12.1(magicast@0.3.4)(rollup@3.29.4)': dependencies: '@nuxt/schema': 3.12.1(rollup@3.29.4) @@ -12905,7 +12948,7 @@ snapshots: ts-dedent: 2.2.0 type-fest: 2.19.0 vue: 3.4.29(typescript@5.4.5) - vue-component-type-helpers: 2.0.21 + vue-component-type-helpers: 2.0.22 transitivePeerDependencies: - encoding - prettier @@ -21349,6 +21392,8 @@ snapshots: vue-component-type-helpers@2.0.21: {} + vue-component-type-helpers@2.0.22: {} + vue-demi@0.14.8(vue@3.4.29(typescript@5.4.5)): dependencies: vue: 3.4.29(typescript@5.4.5)