Nuxt Storybook

The @storybook-vue/nuxt package provides zero-config integration for Nuxt, supporting seamless use of Nuxt-specific features within your Storybook environment. Supported features include:

• Nuxt Modules: Full support for installed Nuxt modules.
• Nuxt Plugins: Integration with Nuxt plugins.
• Nuxt Components: All built-in Nuxt components are available.
• Styling: Support for Sass/Scss, CSS/Sass/Scss Modules, and PostCSS.
• Nuxt Core Features: Auto-imports, Runtime Config, Composables, and JSX.
• TypeScript: Supported out of the box.
• Nuxt DevTools: Full feature support for Nuxt DevTools within Storybook.

The Nuxt Storybook module provides several integrated features:

• Zero Configuration: Enables a quick and easy setup of Storybook in your Nuxt application.
• Auto-run Storybook: Storybook automatically runs when you start your Nuxt application in development mode.
• Storybook Viewer: Discover your Storybook directly from the Nuxt Devtools, eliminating the need to switch between browser tabs.
• Customizable: You can customize Storybook settings within your Nuxt App Config.
• Chromatic Integration: Supports deploying your Storybook to Chromatic to track component changes.
• Open Source: Built on top of the standard Storybook ecosystem.

Storybook offers several integrations to improve workflows:

• Figma Plugin: Embed your stories into Figma to cross-reference designs with live implementations.
• Chromatic: Publish your Storybook to a hosted URL to review and collaborate with your team.
• Addons: Use the Storybook Addon library to integrate various tools directly into the Storybook UI.

To test the latest code from the main branch or a specific Pull Request without waiting for an npm release, you can use pkg.pr.new in your package.json.

To use the main branch:

1. Update devDependencies to use the main branch URL.
2. Remove your lockfile and reinstall dependencies.

To test a specific PR: Update the dependency to include the PR number.

{
  "devDependencies": {
    "@nuxtjs/storybook": "https://pkg.pr.new/@nuxtjs/storybook@main"
  }
}

The documentation for this project uses the Nuxt UI Docs template. To update the documentation to the latest version of the template, remove the existing docs directory and use the Nuxt CLI to generate a new one using the ui/docs template.

rm -rf docs
npm create nuxt@latest -- -t ui/docs docs

Storybook allows you to use stories as a testing suite. You can use them to:

• Test a component in all its possible variations and states.
• Perform Accessibility (a11y) testing to automatically detect accessibility issues during development.
• Run functional tests against component variations to ensure complex logic holds up across different props.

Start the local development server to view the application at http://localhost:3000.

# npm
npm run dev

# pnpm
pnpm run dev

# yarn
yarn dev

# bun
bun run dev

To create a new project starting from a minimal Nuxt template with Storybook pre-configured, initialize a Nuxt project using nuxi and then run the Storybook initialization command.

1. Initialize Nuxt: npx nuxi@latest init <project-name>
2. Add Storybook: npx storybook@latest init

npx nuxi@latest init my-app
cd my-app
npx storybook@latest init

To set up the showcase example, install the project dependencies using your preferred package manager.

# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install