chore: move nuxt image test to showcase example

.vscode/settings.json

@@ -1,3 +1,4 @@
 {
-  "eslint.experimental.useFlatConfig": true
+  "eslint.experimental.useFlatConfig": true,
+  "cSpell.words": ["nuxt", "ofetch"]
 }

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.

packages/storybook-addon/playground/stories/NuxtImage.stories.ts → 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<typeof MyComponent>
+} satisfies Meta<typeof NuxtImageComponent>
 
 export default meta
 type Story = StoryObj<typeof meta>

packages/storybook-addon/playground/components/MyNuxtImage.vue → examples/showcase/components/NuxtImage.vue

@@ -7,8 +7,8 @@
       height="200"
       class="rounded"
     />
     <br />
-    <h4>responsive image with nuxt-image component:</h4>
+    <h4>Responsive image with nuxt-image component:</h4>
     <NuxtPicture
       src="/images/sb-nuxt-logo.jpg"
       width="1204"

examples/showcase/nuxt.config.ts

@@ -1,7 +1,7 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
   devtools: { enabled: true },
-  modules: ['@nuxtjs/storybook'],
+  modules: ['@nuxtjs/storybook', '@nuxt/image'],
   runtimeConfig: {
     // For testing runtimeConfig in useMyComposable
     app: {

examples/showcase/package.json

@@ -11,6 +11,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@nuxt/image": "^1.7.0",
     "nuxt": "^3.11.2",
     "vue": "^3.4.21",
     "vue-router": "^4.3.0"

packages/storybook-addon/src/preview.ts

@@ -12,6 +12,7 @@ import { setup } from '@storybook/vue3'
 import type { ObjectPlugin, Plugin } from 'nuxt/app'
 import { applyPlugins, createNuxtApp } from 'nuxt/app'
 import { getContext } from 'unctx'
+import { $fetch } from 'ofetch'
 // @ts-expect-error virtual file
 import { runtimeConfig } from 'virtual:nuxt-runtime-config'
 
@@ -51,6 +52,13 @@ setup(async (vueApp, storyContext) => {
     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,