storybook-vue/storybook-nuxt

Storybook integration for Nuxt Framework - Unleashing the power of Storybook in Nuxt/Vue Land!"

Storybook for Nuxt framework

Storybook package for Nuxt framework with zero configs. seamless integration supporting all Nuxt fancy features

https://www.veed.io/embed/1f9d58b6-3c76-43a1-a15e-ae95af8dff5f

Demos

• Simple Demo storybook7-nuxt3-demo or try it on Stackblitz

• Demo with more plugins i18n+pinia try it on Stackblitz

• Full Demo i18n, Pinia, Composables,Vuetify,and Routing try it on Stackblitz

Storybook module for setup:

Storybook Nuxt-Module

Storybook Nuxt-Module Demo

Supported Features

👉 Nuxt Modules

👉 Nuxt Plugins

👉 All in-built Nuxt Components

👉 Sass/Scss

👉 Css/Sass/Scss Modules

👉 JSX

👉 Postcss

👉 Auto Imports

👉 Runtime Config

👉 Composables

👉 Typescript (already supported out of the box by Storybook)

👉 Nuxt DevTools : finally as Bonus, Nuxt DevTools works amazingly with your Storybook, full features

storybook-nuxt-devtools.mov

Requirements

• Nuxt >= 3.x
• Storybook >= 7.x

Getting Started

In a project without Storybook

Follow the prompts after running this command in your Nuxt project's root directory:

npx storybook-nuxt init

More on getting started with Storybook

Automatic migration

When running the upgrade command above, you should get a prompt asking you to migrate to @storybook-vue/nuxt, which should handle everything for you. In case auto-migration does not work for your project, refer to the manual migration below.

Update your main.js to change the framework property:

// .storybook/main.js
export default {
  // ...
  framework: {
    name: '@storybook-vue/nuxt', // Add this
    options: {},
  },
}

Documentation

check https://storybook.nuxtjs.org/

License

This repository is licensed under the MIT License. Feel free to use the code and modify it according to your needs.

Contacts :

🔖 Mail: [email protected]

💬 Discord: ChakAs3

🐦‍⬛ Twitter: @ChakirQatab

storybook-nuxt's Issues

Error during setup: could not find a copy of typescript to link

I get an error during setup and cannot complete to put storybook into my existing nuxt project.

$ npx storybook-nuxt init

YARN1 error: An unexpected error occurred: "could not find a copy of typescript to link in /.../node_modules/@storybook/vue3-vite/node_modules".

Please check the logfile generated at ./storybook.log for troubleshooting and try again.

     Error: YARN1 error: An unexpected error occurred: "could not find a copy of typescript to link in /.../node_modules/@storybook/vue3-vite/node_modules".

Please check the logfile generated at ./storybook.log for troubleshooting and try again.
    at Yarn1Proxy.addDependencies (/.../node_modules/@storybook/cli/dist/generate.js:3038:15)
    at async baseGenerator (/.../node_modules/@storybook/cli/dist/generate.js:4625:5)
    at async generator18 (/.../node_modules/@storybook/cli/dist/generate.js:5082:3)
    at async installStorybook (/.../node_modules/@storybook/cli/dist/generate.js:5212:12)
    at async doInitiate (/.../node_modules/@storybook/cli/dist/generate.js:5311:25)
    at async withTelemetry (/.../node_modules/@storybook/core-server/dist/index.js:113:4155)
    at async initiate (/.../node_modules/@storybook/cli/dist/generate.js:5354:26)

storybook.log:

yarn add v1.22.19
[1/5] Validating package.json...
[2/5] Resolving packages...
[3/5] Fetching packages...
warning [email protected]: The engine "vscode" appears to be invalid.
[4/5] Linking dependencies...
warning " > @vitejs/[email protected]" has unmet peer dependency "vite@^4.0.0".
warning "nuxt-schema-org > @unhead/[email protected]" has unmet peer dependency "@unhead/vue@>=1.1.9".
warning " > [email protected]" has unmet peer dependency "webpack@^5.0.0".
warning " > [email protected]" has unmet peer dependency "vite@^3.0.0 || ^4.0.0".
warning " > @storybook/[email protected]" has unmet peer dependency "@vue/compiler-core@^3.0.0".
warning " > @storybook-vue/[email protected]" has unmet peer dependency "vite@^4.0.0".
warning "@storybook-vue/nuxt > @nuxt/[email protected]" has unmet peer dependency "vite@*".
warning "@storybook-vue/nuxt > @storybook/[email protected]" has unmet peer dependency "vite@^3.0.0 || ^4.0.0".
warning "@storybook-vue/nuxt > @storybook/[email protected]" has unmet peer dependency "vite@^3.0.0 || ^4.0.0".
warning "@storybook-vue/nuxt > @storybook/vue3-vite > @vitejs/[email protected]" has unmet peer dependency "vite@^4.0.0".
error An unexpected error occurred: "could not find a copy of typescript to link in /.../node_modules/@storybook/vue3-vite/node_modules".
info If you think this is a bug, please open a bug report with the information provided in "/.../yarn-error.log".
info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.

% node --version
v18.16.1
% npm --version
9.5.1
% yarn --version
1.22.19

Errors for globals nuxt components

Transform failed with 2 errors: 9:20:19 PM
/Users/a1/work-projects/popso/components/global/v-button/v-button.vue:126:6: ERROR: The symbol "_hoisted_1" has already been declared
/Users/a1/work-projects/popso/components/global/v-button/v-button.vue:168:7: ERROR: Multiple exports with the same name "default"

ERROR Transform failed with 1 error: 9:20:19 PM
/Users/a1/work-projects/popso/components/global/v-content-container/v-content-container.vue:56:7: ERROR: Multiple exports with the same name "default"

ERROR Transform failed with 2 errors: 9:20:19 PM
/Users/a1/work-projects/popso/components/global/v-icon/v-icon.vue:48:6: ERROR: The symbol "_hoisted_1" has already been declared
/Users/a1/work-projects/popso/components/global/v-icon/v-icon.vue:71:7: ERROR: Multiple exports with the same name "default"

ERROR Transform failed with 2 errors: 9:20:19 PM
/Users/a1/work-projects/popso/components/global/v-page-container/v-page-container.vue:58:6: ERROR: The symbol "_hoisted_1" has already been declared
/Users/a1/work-projects/popso/components/global/v-page-container/v-page-container.vue:93:7: ERROR: Multiple exports with the same name "default"

ERROR Transform failed with 1 error: 9:20:19 PM
/Users/a1/work-projects/popso/components/global/v-text/v-text.vue:148:7: ERROR: Multiple exports with the same name "default"

ERROR Transform failed with 2 errors: 9:20:19 PM
/Users/a1/work-projects/popso/components/global/v-tooltip/v-tooltip.vue:157:6: ERROR: The symbol "_hoisted_1" has already been declared
/Users/a1/work-projects/popso/components/global/v-tooltip/v-tooltip.vue:208:7: ERROR: Multiple exports with the same name "default"

And every component that imports a global component does not work, here is such an error:

runtime.js:4 TypeError: Failed to fetch dynamically imported module: http://localhost:6006/components/ui-kit/v-error-sutb/v-error-stub.stories.js

WARN Failed to load preset: "@storybook-vue/nuxt/preset"

After switching to this package in my project, I receive the following error.

WARN   Failed to load preset: "@storybook-vue/nuxt/preset"
ERR! Error: Cannot find module '/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook-vue/nuxt/dist/preset.js'
ERR!     at createEsmNotFoundErr (node:internal/modules/cjs/loader:1098:15)
ERR!     at finalizeEsmResolution (node:internal/modules/cjs/loader:1091:15)
ERR!     at resolveExports (node:internal/modules/cjs/loader:567:14)
ERR!     at Module._findPath (node:internal/modules/cjs/loader:[63](https://github.com/jojomatik/nuxt-3-base/actions/runs/5685029360/job/15409035368#step:7:64)6:31)
ERR!     at Module._resolveFilename (node:internal/modules/cjs/loader:1063:27)
ERR!     at Module._resolveFilename (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/esbuild-register/dist/node.js:4768:36)
ERR!     at Module._load (node:internal/modules/cjs/loader:922:27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1143:19)
ERR!     at require (node:internal/modules/cjs/helpers:110:18)
ERR!     at interopRequireDefault (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-common/dist/index.js:6:21)
ERR!  Error: Cannot find module '/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook-vue/nuxt/dist/preset.js'
ERR!     at createEsmNotFoundErr (node:internal/modules/cjs/loader:1098:15)
ERR!     at finalizeEsmResolution (node:internal/modules/cjs/loader:1091:15)
ERR!     at resolveExports (node:internal/modules/cjs/loader:567:14)
ERR!     at Module._findPath (node:internal/modules/cjs/loader:636:31)
ERR!     at Module._resolveFilename (node:internal/modules/cjs/loader:1063:27)
ERR!     at Module._resolveFilename (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/esbuild-register/dist/node.js:4768:36)
ERR!     at Module._load (node:internal/modules/cjs/loader:922:27)
ERR!     at Module.require (node:internal/modules/cjs/loader:1143:19)
ERR!     at require (node:internal/modules/cjs/helpers:110:18)
ERR!     at interopRequireDefault (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-common/dist/index.js:6:21) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   path: '/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook-vue/nuxt/package.json'
ERR! }
ERR! Error: no builder configured!
ERR!     at getPreviewBuilder (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-server/dist/index.js:57:1918)
ERR!     at getBuilders (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-server/dist/index.js:57:2221)
ERR!     at async buildStaticStandalone (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-server/dist/index.js:103:1540)
ERR!     at async withTelemetry (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-server/dist/index.js:113:3[65](https://github.com/jojomatik/nuxt-3-base/actions/runs/5685029360/job/15409035368#step:7:66)9)
ERR!     at async build (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/cli/dist/generate.js:435:1059)
ERR!     at async Command.<anonymous> (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/cli/dist/generate.js:438:125)
ERR!  Error: no builder configured!
ERR!     at getPreviewBuilder (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-server/dist/index.js:57:1[91](https://github.com/jojomatik/nuxt-3-base/actions/runs/5685029360/job/15409035368#step:7:92)8)
ERR!     at getBuilders (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-server/dist/index.js:57:2221)
ERR!     at async buildStaticStandalone (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-server/dist/index.js:103:1540)
ERR!     at async withTelemetry (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/core-server/dist/index.js:113:3659)
ERR!     at async build (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/cli/dist/generate.js:435:1059)
ERR!     at async Command.<anonymous> (/home/runner/work/nuxt-3-base/nuxt-3-base/node_modules/@storybook/cli/dist/generate.js:438:125)

See also this PR jojomatik/nuxt-3-base#273 and workflow https://github.com/jojomatik/nuxt-3-base/actions/runs/5685029360/job/15409035368

Vuetify elements black on hover.

When I hover over a vuetify button, the button gets black. The same behavior can be seen with clicking inside a text-field.

Screencast.from.2023-08-21.10-22-05.webm

Compatibility issues with Nuxt 3.7.x

I've been running into issues integrating Storybook with a newer Nuxt project, currently on 3.7.0, but I've seen the same issues with newer patch versions of 3.7

Most often, the errors seem related to Storybook being unable to connect to the Nuxt instance: [nuxt] instance unavailable

Steps to reproduce

1. Run demo project at https://stackblitz.com/edit/github-dxsw3r
2. In Storybook, navigate to NuxtLink/Docs and NuxtWelcome/Docs
   • NuxtLink uses the built-in <NuxtLink /> component, but shows an error [nuxt] instance unavailable
   • NuxtWelcome should render the built-in <NuxtWelcome /> component, but shows an error Identifier '_createElementVNode' has already been declared

Compare to the same demo project running Nuxt 3.6.5, which seems to work as expected: https://stackblitz.com/edit/github-dxsw3r-tjesvx

Version 0.2.0 released but not pushed to github?

@chakAs3 I'm trying to solve nuxt-modules/storybook#458 - but it seems the the latest release of this module on npmjs.com (0.2.0) isn't pushed to github. Cheers, and thanks for all the good work!

Error code EUNSUPPORTEDPROTOCOL when installing on Nuxt project

I created blank nuxt project and install this package using npx storybook-nuxt init command, but got this error:

I tried with stackblitz got the same error.

Errors encountered when installing:

I encountered the following errors:

1. Error: Could not evaluate the @storybook-vue/nuxt package from the 'framework' field of Storybook config. Are you sure it's a valid package and is installed?
2. sh: storybook-nuxt: command not found
3. The stories property of StorybookConfig has an error: Object literal may only specify known properties, and 'stories' does not exist in type 'StorybookConfig'
4. The preview.ts has an error: Module '"@storybook-vue/nuxt"' has no exported member 'Preview'

Eventually I got Storybook started by downgrading Storybook to a non-alpha version, and manually installing the storybook-nuxt cli package, but...

Instead of rendering the story, Storybook renders, for the story, a Nuxt 404 page.

Error: Could not evaluate the @storybook-vue/nuxt package from the 'framework' field of Storybook config.

How can I disable middleware for certain pages?

Perhaps there is no such functionality now, if so, then it is necessary. I think that in many projects there are pages with protected paths, for viewing which authorization is necessary.

import { storeToRefs } from 'pinia';
import { useAuthStore } from '@/store/auth';



export default defineNuxtRouteMiddleware((to) => {
	const authStore = useAuthStore();
	const { authState } = storeToRefs(authStore);

	if (!authState.value && to.path !== '/login') {
		return navigateTo('/login');
	}
});

I have such middleware, how will storybook behave if I create page histories with such middleware.

I also think it would be great to add a description of this behavior to the documentation.

Warnings and error with vue-router

Hello,
I'm bootstrapping storybook-nuxt on my nuxt3 big project and I experiment several issues, not blocking (for the moment), only visible in the browser devtools console. And the main issue seems to be that vue-router tries to load the current url /iframe.html?xxx and fails (which is understanding).
I tried to setup a default value for the router in preview.ts, but this route is taken into account too late.

What is the good way to avoid this issue ?

Regards

Question: Build and Deploy the storybook

Hi there,

Yesterday i run into a problem while deploying the storybook to Vercel where the build command was never ending.

After that i tried it out locally with the demo repo mentioned in the Readme. It was the same behavior. It starts building storybook, is writing everything into the storybook-static/ Folder until this message appears: ℹ page reload storybook-static/iframe.html. From there the build gets stuck. No errors shown.

Could it be that the app needs to run in dev mode on a Node server? Or do you have a recommendation for the deployment process?

Thanks in advance!

Issue with Vuetify treeshaking

Environment:

• Operating System: Darwin
• Node Version: v20.3.1
• Nuxt Version: 3.6.5
• Nitro Version: 2.5.2
• Package Manager: [email protected]
• Builder: vite
• User Config: css, app, build, modules, runtimeConfig, typescript, hooks
• Runtime Modules: @pinia/[email protected], @nuxt/[email protected]
• Build Modules: -

Issue:
I'm encountering a problem while trying to load vite-plugin-vuetify, to enable treeshaking in vuetify.

RR! Error: Vuetify plugin must be loaded after the vue plugin
ERR!     at configResolved (/Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite-plugin-vuetify/dist/importPlugin.js:19:23)
ERR!     at file:///Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite/dist/node/chunks/dep-439026c8.js:65802:28
ERR!     at Array.map (<anonymous>)
ERR!     at resolveConfig (file:///Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite/dist/node/chunks/dep-439026c8.js:65802:14)
ERR!     at async _createServer (file:///Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite/dist/node/chunks/dep-439026c8.js:64808:2
0)
ERR!     at async Module.start (/Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/@storybook/builder-vite/dist/index.js:159:12527)

Relevant Nuxt Config section:

{
... // Other config
  hooks: {
    "vite:extendConfig": (config: any) => {
      if (config.plugins) {
        config.plugins.push(vuetify());
      }

    },
  },

}

If it helps, here is the error source, I have not been able to find whether I can manually set this vite-vue-plugin myself, it seems to me like nuxi loads it but Storybooks doesn't.

function importPlugin() {
    return {
        name: 'vuetify:import',
        configResolved(config) {
            if (config.plugins.findIndex(plugin => plugin.name === 'vuetify:import') < config.plugins.findIndex(plugin => plugin.name === 'vite:vue')) {
                throw new Error('Vuetify plugin must be loaded after the vue plugin');
            }
        },
  }
}

Nuxt i18n module support

The useI18n composable is not working in storybook.

Error: Need to install with app.use function
at createI18nError (/node_modules/vue-i18n/dist/vue-i18n.mjs?v=7bdee190:97:12))
at useI18n (/node_modules/vue-i18n/dist/vue-i18n.mjs?v=7bdee190:2266:15))
at setup (/components/base/select/BaseSelectMultiple.vue?t=1690882318189:29:24))
at callWithErrorHandling (/node_modules/.cache/sb-vite/deps/chunk-Z65A5MQJ.js?v=7bdee190:1787:18))
at setupStatefulComponent (/node_modules/.cache/sb-vite/deps/chunk-Z65A5MQJ.js?v=7bdee190:8853:25))
at setupComponent (/node_modules/.cache/sb-vite/deps/chunk-Z65A5MQJ.js?v=7bdee190:8814:36))
at mountComponent (/node_modules/.cache/sb-vite/deps/chunk-Z65A5MQJ.js?v=7bdee190:7219:7))
at processComponent (/node_modules/.cache/sb-vite/deps/chunk-Z65A5MQJ.js?v=7bdee190:7185:9))
at patch (/node_modules/.cache/sb-vite/deps/chunk-Z65A5MQJ.js?v=7bdee190:6658:11))

Storybook V8 / vue-component-meta support

Hey guys,
do you plan to support the V8 beta or will you wait until it's released? I'm dying to try vue-component-meta instead of docgen - if you think it's easy to hack it together I would try it, but I'm not really knowledgeable enough with all the bits yet.

NuxtLink component not working

When my component have NuxtLink component my story have warn, and my story not render:

[Vue warn]: Component is missing template or render function. 
  at <NuxtLink to="/" > 
  at <MyWelcome > 
  at <Anonymous> 
  at <App>

Injection "usehead" not found.

If storybook finds an error, it stops displaying stories. My pages use "useHead" and "definePageMeta", but storybook doesn't know what it is and I get such warnings:

[Vue warn]: injection "usehead" not found. 
  at <Index > 
  at <Anonymous> 
  at <App>

I want to make stories for pages so that I can then fix changes using chromatic.

Identifier '_createElementVNode' has already been declared after install

Help me please i get error after minimal setup

i tried it with nuxt 3.7 and 3.6 i get this error everywhere
i have this problem in this repo: https://github.com/AlexanderBredun/nuxt3-storybook
node: v18.16
npm: v9.5.1

Windows - "pnpm storybook" leads to Error: Invariant failed: No builder configured in core.builder

Problems

Clean https://github.com/storybook-vue/storybook-nuxt-starter master

Updating "@storybook-vue/nuxt" to 0.1.0-rc.8:

How to reproduce

• On windows 10
• Nodejs LTS

Steps:

• Checkout https://github.com/storybook-vue/storybook-nuxt-starter master
• pnpm install
• pnpm storybook

The problem was reproducible on two different windows 10 machines.
On MacOs/Linux the issue does not occur.

Repository with "@storybook-vue/nuxt" to 0.1.0-rc.8: can be found here https://github.com/Pecral/storybook-nuxt-starter-no-builder-configured

Missing "./dist/runtime/preview" specifier in "@storybook-vue/nuxt" package

Missing "./dist/runtime/preview" specifier in "@storybook-vue/nuxt" package

main.ts

import type { StorybookConfig } from '@storybook-vue/nuxt';

const config: StorybookConfig = {
	stories: ['../components/**/*.stories.ts', '../stories/**/*.stories.ts'],
	addons: [
		'@storybook/addon-links',
		'@storybook/addon-essentials',
		'@storybook/addon-interactions',
	],

	framework: {
		name: '@storybook-vue/nuxt',
		options: {},
	},

	docs: {
		autodocs: 'tag',
	},
};

export default config;

Allow overriding Nuxt Vite HMR WebSocket port config

Using same config, you're not able to run standalone Nuxt app simultaneously with Storybook app (the vite HMR config is being shared/reused by both Nuxt apps.)

Maybe something like this?

  framework: {
    name: "@storybook-vue/nuxt",
    options: {
      vite: {
        server: {
          hmr: {
            clientPort: 24679,
            port: 24679
          }
        }
      }
    },
  },

I currently use this in nuxt.config.ts to change the HMR ports:

const STORYBOOK = require.main?.path.split('/').pop() === 'storybook'

const NUXT_VITE_HMR_PORT=STORYBOOK ? 24679 : 24678



  vite: {
    server: {
      hmr: {
        clientPort: NUXT_VITE_HMR_PORT,
        port: NUXT_VITE_HMR_PORT
      }
    }
  }

Cannot using useNuxtApp on stories

If i try use const nuxtApp = useNuxtApp() i have error:

Error: Converting circular structure to JSON
  at JSON.stringify (<anonymous>))
  at toDisplayString (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:1566:159))
  at Proxy._sfc_render (/components/app-tooltip-area/app-tooltip-area.vue?t=1702415698562:49:15))
  at renderComponentRoot (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:2399:17))
  at ReactiveEffect.componentUpdateFn [as fn] (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7273:46))
  at ReactiveEffect.run (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:410:19))
  at instance.update (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7386:52))
  at setupRenderEffect (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7394:5))
  at mountComponent (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7184:5))
  at processComponent (/node_modules/.cache/sb-vite/deps/chunk-JM26Q3FN.js?v=c3649eb5:7137:9))

Unable to start a new storybook nuxt project on windows

node version : 20.11.0
yarn version : 1.22.21
windows version : 23H2 (22631.3085)

Step to reproduce :

• Create nuxt3 repository using npx nuxi@latest init
• Select yarn as package manager
• add storybook using yarn add -D @storybook-vue/nuxt-storybook
• Add nuxt config :

  modules: [
    '@storybook-vue/nuxt-storybook',
  ],
  storybook: {
    url: 'http://localhost:6006',
    storybookRoute: '/__storybook__',
    port: 6006,
  },

• yarn run dev

Result :

node:events:496
      throw er; // Unhandled 'error' event
      ^

Error: spawn yarn ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn yarn',
  path: 'yarn',
  spawnargs: [ 'install' ]
}

Try to identify the situation :

• Do the same steps but in wsl-ubuntu
• WORKS !
• Copy the dependencies :

    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "7.6.7",
    "@types/node": "^18.17.5",
    "@storybook/vue3": "7.6.7",
    "@storybook-vue/nuxt": "0.2.1",
    "@nuxtjs/storybook": "7.0.0",
    "@storybook/addon-links": "7.6.7",
    "@storybook/builder-vite": "7.6.7",
    "@storybook/addon-essentials": "7.6.7",
    "@storybook/addon-interactions": "7.6.7",
    "@storybook/testing-library": "^0.2.0",
    "@storybook/blocks": "7.6.7"

• run yarn install

Result : same error

node:events:496
      throw er; // Unhandled 'error' event
      ^

Error: spawn yarn ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:286:19)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:292:12)
    at onErrorNT (node:internal/child_process:484:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'spawn yarn',
  path: 'yarn',
  spawnargs: [ 'install' ]
}

2nd resolution try (with deps of 1st try) :

• Upgrade yarn
  • admin console : corepack enable
  • yarn set version stable ( v 4.1.0 )
  • yarn install
  • yarn run dev : Works ...

I've been working a full day on this previously @ job (4 days ago) and had a [email protected] error at theses steps.
I am still posting this due to being helpfull for those stuck @ step1 but i'm confused.

For thoses that were wondering :
Trying a clean state with yarn 4.1.0 does not fix the issue

Vuetify not working

Installed version of vuetify: 3.3.6.
Does not load any vuetify related components.
Unocss works for example. And it seems like the plugin gets loaded when running pnpm storybook:

,,,,
  {
    src: '/home/bene/Projects/nuxt3-frontend-webapp/plugins/useVuetify.ts',
    mode: 'all'
  }
]

Add optional dev flag to Nuxt module

In monorepo setup, for example, I'll have only one sandbox "app" (Nuxt calls this a "playground") which will run Storybook in dev mode. If I have many other apps, I don't want to actually run Storybook dev instances per each app (playground pulls stories from all the other apps.)

However, in production deployments, I do want a static storybook build per each app, so I still want to install Storybook Nuxt on all apps, just not run all apps in dev mode.

Therefore, it should be optional to auto-install and auto-add the module to an app. The proposal is to make the cli respect a new flag called --module:

pnpm dlx storybook-nuxt@latest init --module

Another solution could be to always install, but use options in Nuxt config for the module, like:

export default defineNuxtConfig({
  modules: [
    '@storybook-vue/nuxt-storybook'
  ],
    
  storybook: {
    // Default to false, as most apps should only run production builds and its "expensive" to run dev servers
    dev: true
  }
})

I think I actually like the second proposal better, and would be extremely simple to make a PR for.

In Nuxt module:

export default defineNuxtModule<ModuleOptions>({
  meta: {
    name: 'storybook-nuxt',
    configKey: 'storybook'
  },
  defaults: {
    dev: false
  },
  async setup (options, nuxt) {

    ....

    if(nuxt.options.dev && options.dev) {
      // Start Storybook dev server
    }
  }
}

Bug with Global Component Setting in Config

When I set the global component to true in the config, it's causing a bug and showing an error message.

[vite:vue] At least one <template> or <script> is required in a single file component.

What's weird is that this happens even when none of the components are empty. I tried even on a new project too. I'm not sure if it's related, but I've saw a similar problem with Storybook Vue Vite.

storybookjs/storybook#20024

components: [ { global: true, path: '~/components', prefix: 'Mds', },

missing staticDirs type in `StorybookConfig`

It would be better if we could integrate staticDirs directly into @nuxtjs/storybook 😃

Configuration with UnoCSS

I am working on a project and am trying to integrate Storybook into it as a sort of design library. I am using UnoCSS as my CSS engine, but my 'story' components, despite having the relevant uno classes, do not inherit the styling that I am expecting. Is there guidance for hooking up Uno to work with Storybook?

Windows - ERR_UNSUPPORTED_ESM_URL_SCHEME

Problems

• Checkout https://github.com/storybook-vue/storybook-nuxt-starter master
• update "@storybook-vue/nuxt" to 0.1.5
• pnpm install
• pnpm storybook

Error [ERR_UNSUPPORTED_ESM_URL_SCHEME]: Only URLs with a scheme in: file, data, and node are supported by the default ESM loader. On Windows, absolute paths must be valid file:// URLs. Received protocol 'c:'

Environment

• On windows 10/11
• Nodejs 18.17.1 or Nodejs 20.6.1

The problem was reproducible on two different windows 10/11 machines.

Do you have any ideas?

The auto-import Vue APIs does not work.

Nuxt auto-imports components, composables, helper functions and Vue APIs.
But we need to explicitly import as in your example
It would be great to add this functionality.

Using with NuxtIcon: At least one <template> or <script> is required in a single file component

I just installed this extension in an existing project with npx storybook-nuxt init and it seems to run fine, but above the Storybook UI there is an error shown:

 ERROR  Internal server error: At least one <template> or <script> is required in a single file component.                                                                            10:16:05 PM
  Plugin: vite:vue
  File: /.../node_modules/nuxt-icons/dist/runtime/components/nuxt-icon.vue

Unfortunately I can't find any help in other issues here or on the web. I also don't understand why the globally available NuxtIcon component could throw this error even though the simple dummy component I use in Storybook is not even using it.

Is yarn berry supported?

The whole thing isn't running for me when upgrading my project to Nuxt 3. I tried to install this using the exact package versions in an example Stackblitz, https://stackblitz.com/edit/github-dxsw3r-tjesvx, but I'm getting:

=> Failed to build the preview
Error: Cannot find @storybook/vue3-vite,

It is installed though:

    "@nuxtjs/storybook": "7.0.0",
    "@storybook-vue/nuxt": "0.1.7",
    "@storybook/addon-essentials": "7.5.0-alpha.3",
    "@storybook/addon-interactions": "7.5.0-alpha.3",
    "@storybook/addon-links": "7.5.0-alpha.3",
    "@storybook/blocks": "7.5.0-alpha.3",
    "@storybook/builder-vite": "7.5.0-alpha.3",
    "@storybook/testing-library": "^0.2.0",
    "@storybook/vue3": "7.5.0-alpha.3",
    "@types/node": "^18.17.5",
    "nuxt": "^3.6.5",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "storybook": "7.5.0-alpha.3",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5",
    "@storybook-vue/vue3-vite" :"7.5.0-alpha.3.0",
    "@vue/compiler-core": "3.3.4",
    "vite": "4.3.9",

It's in node_modules too.

I'd post a minimal repro, except stackblitz doesn't support modern yarn.

SyntaxError: Cannot use import statement outside a module

PS C:\Users\dodaa\WebstormProjects\popso> npm run storybook

[email protected] storybook
storybook dev -p 6006

@storybook/cli v7.3.0

WARN Failed to load preset: "@storybook-vue\nuxt\preset"
ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook-vue\nuxt\dist\preset.mjs:1
ERR! import { resolve, join } from 'path';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:360:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
ERR! at Object.newLoader [as .mjs] (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9)
ERR! at Module.load (node:internal/modules/cjs/loader:1033:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1057:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)
ERR! at Object. (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook-vue\nuxt\preset.js:1:18)
ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook-vue\nuxt\dist\preset.mjs:1
ERR! import { resolve, join } from 'path';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:360:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
ERR! at Object.newLoader [as .mjs] (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9)
ERR! at Module.load (node:internal/modules/cjs/loader:1033:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1057:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)
ERR! at Object. (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook-vue\nuxt\preset.js:1:18)
WARN Failed to load preset: {"type":"presets","name":"C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js"} on level 1
ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js:1
ERR! import { fileURLToPath } from 'node:url';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:360:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
ERR! at Object.newLoader (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9)
ERR! at Object.extensions..js (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:1033:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1057:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)
ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js:1
ERR! import { fileURLToPath } from 'node:url';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:360:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
ERR! at Object.newLoader (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9)
ERR! at Object.extensions..js (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:1033:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1057:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)
ERR! Error: Invariant failed: No builder configured in core.builder
ERR! at invariant (C:\Users\dodaa\WebstormProjects\popso\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:14:11)
ERR! at buildDevStandalone (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook\core-server\dist\index.js:128:1790)
ERR! at async withTelemetry (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook\core-server\dist\index.js:113:3910)
ERR! at async dev (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook\cli\dist\generate.js:457:401)
ERR! at async Command. (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook\cli\dist\generate.js:459:225)
ERR! Error: Invariant failed: No builder configured in core.builder
ERR! at invariant (C:\Users\dodaa\WebstormProjects\popso\node_modules\tiny-invariant\dist\tiny-invariant.cjs.js:14:11)
ERR! at buildDevStandalone (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook\core-server\dist\index.js:128:1790)
ERR! at async withTelemetry (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook\core-server\dist\index.js:113:3910)
ERR! at async dev (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook\cli\dist\generate.js:457:401)
ERR! at async Command. (C:\Users\dodaa\WebstormProjects\popso\node_modules@storybook\cli\dist\generate.js:459:225)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

WARN Failed to load preset: {"type":"presets","name":"C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js"} on level 1
ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js:1
ERR! import { fileURLToPath } from 'node:url';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:360:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
ERR! at Object.newLoader (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9)
ERR! at Object.extensions..js (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:1033:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1057:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)
ERR! C:\Users\dodaa\WebstormProjects\popso\node_modules\storybook-addon-nuxt\dist\preset.js:1
ERR! import { fileURLToPath } from 'node:url';
ERR! ^^^^^^
ERR!
ERR! SyntaxError: Cannot use import statement outside a module
ERR! at Object.compileFunction (node:vm:360:18)
ERR! at wrapSafe (node:internal/modules/cjs/loader:1084:15)
ERR! at Module._compile (node:internal/modules/cjs/loader:1119:27)
ERR! at Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
ERR! at Object.newLoader (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:2262:9)
ERR! at Object.extensions..js (C:\Users\dodaa\WebstormProjects\popso\node_modules\esbuild-register\dist\node.js:4807:24)
ERR! at Module.load (node:internal/modules/cjs/loader:1033:32)
ERR! at Function.Module._load (node:internal/modules/cjs/loader:868:12)
ERR! at Module.require (node:internal/modules/cjs/loader:1057:19)
ERR! at require (node:internal/modules/cjs/helpers:103:18)

storybook config(main.js):

import { mergeConfig } from 'vite'
import userConfig from './vite.config';

module.exports = {
  stories: [
    '../components/**/*.docs.mdx',
    '../components/**/*.stories.@(js|ts)',
    '../pages/**/*.stories.@(js|ts)'
  ],
  addons: [
    '@storybook/addon-essentials',
    'storybook-addon-nuxt'
  ],
  framework: {
    name: '@storybook-vue/nuxt',
    options: {}
  },
  docs: {
    autodocs: 'tag'
  },
  async viteFinal(baseConfig) {
    return mergeConfig(baseConfig, userConfig);
  }
};

userConfig:

import { fileURLToPath } from 'url';
import { defineConfig } from 'vite';

export default defineConfig({
	resolve: {
		alias: {
			'~': fileURLToPath(new URL('../', import.meta.url)),
			'@': fileURLToPath(new URL('../', import.meta.url)),
		},
	},
	css: {
		preprocessorOptions: {
			scss: {
				additionalData: `
					@import "@/assets/styles/variables/colors.scss";
					@import "@/assets/styles/variables/media.scss";
					@import "@/assets/styles/mixins/layouts.scss";
					@import "@/assets/styles/mixins/media.scss";
					@import "@/assets/styles/mixins/typography.scss";
					@import "@/assets/styles/mixins/helpers.scss";
				`
			}
		}
	}
});

On install: Cannot use import outside of module

pnpm dlx nuxi@latest init my-app
cd my-app
pnpm dlx storybook-nuxt init

bug(nuxt-content): could not load file `mdc-imports.mjs`

Hello, and thank you for taking initiative in this module!

My set-up includes Nuxt Content, and produces this error on macOS 12.2.1 (21D62) Monterey

ℹ Building Nitro Server (preset: node-server)                                                             nitro 8:31:53 am

[nitro 8:31:57 am]  ERROR  Error: Could not load file:///Users/<REDACTED>/Code/projects/<REDACTED>/.nuxt/mdc-imports.mjs (imported by node_modules/.pnpm/@[email protected]/node_modules/@nuxtjs/mdc/dist/runtime/parser/index.mjs): ENOENT: no such file or directory, open 'file:///Users/<REDACTED>/Code/projects/<REDACTED>/.nuxt/mdc-imports.mjs'


undefined

Error: Error: Could not load file://./.nuxt/mdc-imports.mjs (imported by node_modules/.pnpm/@[email protected]/node_modules/@nuxtjs/mdc/dist/runtime/parser/index.mjs): ENOENT: no such file or directory, open 'file://./.nuxt/mdc-imports.mjs'
    at defineNuxtConfig (./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]_q6xcmcxyhuuik33x6btbuqlzni/node_modules/@storybook-vue/nuxt/dist/preset.cjs:79:11)
    at async Object.viteFinal (./node_modules/.pnpm/@[email protected]_@[email protected]_@[email protected][email protected][email protected]_q6xcmcxyhuuik33x6btbuqlzni/node_modules/@storybook-vue/nuxt/dist/preset.cjs:97:22)
    at async createViteServer (./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@storybook/builder-vite/dist/index.js:159:10530)
    at async Module.start (./node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@storybook/builder-vite/dist/index.js:159:12527)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

 ELIFECYCLE  Command failed with exit code 1.

Things tried

1. I confirmed the file it is looking for does indeed exist.
2. I tried disabling mdc in Nuxt Content, but this didn't help.
3. I tried making a repro for you but for some reason Storybook just hung and never launched :(

Unable to make it work

Hi! I'm having troubles testing this project. The minimal reproduction is to init a new Nuxt project with the command npx nuxi@latest init PROJECT_NAME and then inside the root of the project I tried the command suggested in the README npx storybook@latest init
But it's not working, it runs, it asks me for the builder used in the project (I selected vite) and then it tell me "Storybook was successfully installed in your project! 🎉" but that's not true! My package.json is untouched and ofc the command yarn storybook fails.

I tried with node v16 and v18. Currently Im using yarn

__docgenInfo has hardcoded path

Hello, very cool package! Really excels our usage of nuxt with storybook.

We have a problem deploying the storybook with this approach. https://storybook.js.org/docs/react/sharing/publish-storybook

The error is Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".. I think it's because the path in the compiled story file is hardcoded to the full path. Like in my screenshot. Do you have an idea to work around this?

How to use useAppConfig?

My story is failing because useAppConfig is not defined

Error: Could not resolve "#build/paths.mjs" on Playground

Hello and thanks for your work!

Problem

I tried to run your playground But I encountered the error below:

╭───────────────────────────────────────────────────────────╮                                                                                                                                            10:33:49 AM
│                                                           │
│   Storybook 7.3.2 for @storybook-nuxt/framework started   │
│   139 ms for manager and 13 s for preview                 │
│                                                           │
│    Local:            http://localhost:6006/               │
│    On your network:  http://192.168.0.121:6006/           │
│                                                           │
╰───────────────────────────────────────────────────────────╯
✘ [ERROR] Could not resolve "#build/paths.mjs"

    node_modules/nuxt/dist/app/entry.js:3:24:
      3 │ import { baseURL } from "#build/paths.mjs";
        ╵                         ~~~~~~~~~~~~~~~~~~

  The package import "#build/paths.mjs" is not defined in this "imports" map:

    node_modules/nuxt/package.json:36:13:
      36 │   "imports": {
         ╵              ^

  You can mark the path "#build/paths.mjs" as external to exclude it from the bundle, which will
  remove this error.

✘ [ERROR] Could not resolve "#build/css"

    node_modules/nuxt/dist/app/entry.js:5:7:
      5 │ import "#build/css";
        ╵        ~~~~~~~~~~~~

  The package import "#build/css" is not defined in this "imports" map:

    node_modules/nuxt/package.json:36:13:
      36 │   "imports": {
         ╵              ^

  You can mark the path "#build/css" as external to exclude it from the bundle, which will remove
  this error.

✘ [ERROR] Could not resolve "#build/plugins"

    node_modules/nuxt/dist/app/entry.js:6:20:
      6 │ import plugins from "#build/plugins";
        ╵                     ~~~~~~~~~~~~~~~~

  The package import "#build/plugins" is not defined in this "imports" map:

    node_modules/nuxt/package.json:36:13:
      36 │   "imports": {
         ╵              ^

  You can mark the path "#build/plugins" as external to exclude it from the bundle, which will
  remove this error.

✘ [ERROR] Could not resolve "#build/root-component.mjs"

    node_modules/nuxt/dist/app/entry.js:7:26:
      7 │ import RootComponent from "#build/root-component.mjs";
        ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~~~~

  The package import "#build/root-component.mjs" is not defined in this "imports" map:

    node_modules/nuxt/package.json:36:13:
      36 │   "imports": {
         ╵              ^

  You can mark the path "#build/root-component.mjs" as external to exclude it from the bundle, which
  will remove this error.

✘ [ERROR] Could not resolve "#build/nuxt.config.mjs"

    node_modules/nuxt/dist/app/entry.js:8:26:
      8 │ import { appRootId } from "#build/nuxt.config.mjs";
        ╵                           ~~~~~~~~~~~~~~~~~~~~~~~~

  The package import "#build/nuxt.config.mjs" is not defined in this "imports" map:

    node_modules/nuxt/package.json:36:13:
      36 │   "imports": {
         ╵              ^
 You can mark the path "#build/nuxt.config.mjs" as external to exclude it from the bundle, which
  will remove this error.


 ERROR  error while updating dependencies:                                                                                                                                                               10:39:45 AM
Error: Build failed with 5 errors:
node_modules/nuxt/dist/app/entry.js:3:24: ERROR: Could not resolve "#build/paths.mjs"
node_modules/nuxt/dist/app/entry.js:5:7: ERROR: Could not resolve "#build/css"
node_modules/nuxt/dist/app/entry.js:6:20: ERROR: Could not resolve "#build/plugins"
node_modules/nuxt/dist/app/entry.js:7:26: ERROR: Could not resolve "#build/root-component.mjs"
node_modules/nuxt/dist/app/entry.js:8:26: ERROR: Could not resolve "#build/nuxt.config.mjs"

Step to reproduce

1. clone the repository from the commit fd5afb4
2. go to packages/storybook-nuxt/playground
3. run yarn install
4. use the version 0.0.2-beta.3 of @storybook-nuxt/framework by changing in package.json
5. run yarn storybook

components global:true results in: At least one <template> or <script> is required in a single file component

Thank you a lot for this package. It works very well and i'm super happy that we now have something for nuxt to work with storybook! 👍

I noticed that if you have set global components in nuxt.config to true like this for example, components: { global: true, dirs: ['~/components/global']},, for every globally registered component there will be rendered an error At least one <template> or <script> is required in a single file component.

If you click away the error the storybook and all stories are working as expected until you click on another story.

It's probably a low priority one, because global components are not recommended anyways, but in some circumstances global components can make sense so i just wanted to drop that one here.

Nuxt composables don't work

User-defined autoimported composables work, but composables like useNuxtApp() don't work (needs the Nuxt app context.)

I'm assuming this is still being developed though for 0.1.

Error "spawn npm ENOENT" during initial setup via npx storybook-nuxt init

Environment

Windows 10
node.js 19.1

How to reproduce

Setup new project via:

• npx nuxi@latest init
• Choose npm or pnpm (issue occurs in all)
• Go into folder
• npx storybook-nuxt init or npx storybook-nuxt@nuxt init
  Problem:

PS C:\VisualStudio\nuxt-test\nuxt-app> npx storybook-nuxt init
▶ Initializing Storybook configuration...

Install dependencies 📦️

node:events:491
throw er; // Unhandled 'error' event
^

Error: spawn npm ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:285:19)
at onErrorNT (node:internal/child_process:483:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
at ChildProcess._handle.onexit (node:internal/child_process:291:12)
at onErrorNT (node:internal/child_process:483:16)
at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn npm',
path: 'npm',
spawnargs: [ 'install' ]
}

dont working nuxt devtools

On install: SB_CORE-COMMON_0003

Error after using npx storybook-nuxt init

@storybook/cli v7.4.0

SB_CORE-COMMON_0003: Could not evaluate the '@storybook-vue/nuxt' package from the 'framework' field of Storybook config.

Are you sure it's a valid package and is installed?
at validateFrameworkName (.\node_modules@storybook\core-common\dist\index.js:52:4385)
at buildDevStandalone (.\node_modules@storybook\cli\node_modules@storybook\core-server\dist\index.js:116:1467)
at async withTelemetry (.\node_modules@storybook\cli\node_modules@storybook\core-server\dist\index.js:101:4155)
at async dev (.\node_modules@storybook\cli\dist\generate.js:502:401)
at async Command. (.\node_modules@storybook\cli\dist\generate.js:504:225)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

build-storybook: Failed to resolve module specifier "vue"

This case is for adding production SB build to Nuxt production build as a subroute (mydomain.com/storybook).

NOTE: In previous attempts to integrate Nuxt w/ SB, I've had this working (using unplugin- method and storybook-nuxt-addon method.)

After building for production, I'm getting this error at runtime (build is successful):

TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

Seems to be just a relative path issue maybe.

Build command: pnpm build-storybook -o public/storybook --disable-telemetry && nuxt build

Here's relevant config:

  framework: {
    name: "@storybook-vue/nuxt",
    options: {},
  },
  docs: {
    autodocs: "tag",
  },
  managerHead: (head, { configType }) => {
    if (configType === 'PRODUCTION') {
      return (`
        ${head}
        <base href="/storybook/">
      `)
    }
  },
  async viteFinal(baseConfig, { configType }) {
    return mergeConfig(
      {
        ...(configType === 'PRODUCTION' ? { base: '/storybook/' } : {}),
      },
      baseConfig
    )
  }

Btw, another issue: the SB build hangs and never actually gets to && nuxt build.. Likely, because nothing closes the vite/nuxt severs after build, so process never ends?

Low Priority: Scan stories from Nuxt layers

With Nuxt's layer/extends mechanism, my idea is that folks could extend from abstract layers or apps, and the only "main" app could use Storybook to compile all components from the hierarchy into a only single SB instance.

I have a separate Nuxt module writing out the layer paths (i.e., on nuxt prepare), then use it in SB main.

Feels like storybook-vue/nuxt could easily include these paths by default instead of the user defining it, although its debatable if it should.. maybe it would be good to just write out the layers template for users to use:

// some-module/src/module.ts

    addTemplate({
      filename: 'layers.mjs',
      write: true,
      getContents () {
        // @ts-ignore
        return `export default [${nuxt.options._layers.map(({ cwd }) =>
  `
  '${cwd}'`).join(',')}\n]`
      }
    })

// .storybook/main.ts

import layers from '../.nuxt/layers'     <---- Ugly

const config: StorybookConfig = {
  stories: layers.map(layer => [
    `${layer}/**/*.mdx`,
    `${layer}/**/*.stories.@(js|jsx|ts|tsx)`
  ]).flat()),
  ...
}

Create Human Life Sustainable platform

Library not compatible with @nuxt/ui

Hi,

I'm trying to create a design system with the library https://ui.nuxt.com/

When I use a simple Button component I got this error : NuxtLink is not defined.

Here you can find a reproduction on stackblitz :
https://stackblitz.com/edit/github-k8s9tq-k6b6cz?file=stories%2FMyButton.stories.ts

Moreover, I tried to create a simple component with only a , and I got an error : Error: [nuxt] instance unavailable

Can't use Nuxt Composables

So I'm trying to use nuxt composables like useRuntimeConfig() but then I'm getting the below error:

[nuxt] instance unavailable
Error: [nuxt] instance unavailable
at useNuxtApp (http://localhost:6006/node_modules/nuxt/dist/app/nuxt.js?v=55bb19df:172:13)

How do we go about passing the nuxt context?

Internal server error: Transform failed

When using the package with yarn its not working. There are a lot of different errors in my case it's mostly cannot redeclare _resolveComponent

On your stackblitz it looks like this:

/home/storybook-vue/storybook-nuxt-demo/pages/index.vue:131:6: ERROR: The symbol "_withScopeId" has already been declared
/home/storybook-vue/storybook-nuxt-demo/pages/index.vue:132:6: ERROR: The symbol "_hoisted_1" has already been declared
/home/storybook-vue/storybook-nuxt-demo/pages/index.vue:133:6: ERROR: The symbol "_hoisted_2" has already been declared
/home/storybook-vue/storybook-nuxt-demo/pages/index.vue:134:6: ERROR: The symbol "_hoisted_5" has already been declared
/home/storybook-vue/storybook-nuxt-demo/pages/index.vue:135:6: ERROR: The symbol "_hoisted_6" has already been declared

How to reproduce

1. Go to your stackblitz
2. remove pnpm lock
3. run yarn && yarn add react react-dom --dev
4. run yarn storybook

I guess It's now time for me to say goodbye to yarn and start to refactor my frontend codebase to use pnpm 😂
Still i wanted to leave this one here, so in case someone else having this problem knows that it's working when using pnpm.