Cannot use Composable

[y-negishi]

If I build a story that usesRuntimeConfig with <script setup> and then serve it, I get an error.

[nuxt] instance unavailable

Code

export function useMyComposable() {
  // Because your composable is called in the right place in the lifecycle,
  // useRuntimeConfig will also work
  const config = useRuntimeConfig();
  // console.log('useMyComposable config', config)
  return { config };
}

<script setup>
const { config } = useMyComposable();
</script>

<template>
  <h1>Welcome Nuxt to Storybook</h1>
  <p>{{ config }}</p>
</template>

import type { Meta, StoryObj } from '@storybook/vue3'
import MyNuxtWelcome from './MyWelcome.vue'

const meta = {
  title: 'Example/NuxtWelcome',
  component: MyNuxtWelcome,
  tags: ['autodocs'],

} satisfies Meta<typeof MyNuxtWelcome>

export default meta
type Story = StoryObj<typeof meta>

export const NuxtWelcomeStory: Story = {
  args: {},
}

Environment

"nuxt": "3.9.1",
"storybook": "7.6.7",
"@nuxtjs/storybook": "7.0.0",
"@storybook-vue/nuxt": "0.2.1",
"@storybook/builder-vite": "7.6.7",
"@storybook/vue3": "7.6.7",
"@storybook/vue3-vite": "7.6.7",

Stackblitz

https://stackblitz.com/edit/storybook-vuetify-nuxt-xhunbk?file=package.json

[tobiasdiez]

Duplicate of storybook-vue/storybook-nuxt#97.