Nuxt + Storybook
Quick Setup
- Add
@yassidev/nuxt-storybook
dependency to your project
# Using pnpm
pnpm add -D @yassidev/nuxt-storybook @storybook/vue3-vite
# Using yarn
yarn add --dev @yassidev/nuxt-storybook @storybook/vue3-vite
# Using npm
npm install --save-dev @yassidev/nuxt-storybook @storybook/vue3-vite
- Add
@yassidev/nuxt-storybook
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'@yassidev/nuxt-storybook'
],
storybook: {
config: {}, // What you would export from `.storybook/main`.
buildOptions: {}, // Add any extra options for building the storybook server.
parameters: {} // Parameters you'd normally export from `.storybook/previews`.
}
})
Notes
This module really was just for me to get started with defining stories and be able to use all my Nuxt-specific features without requiring a bunch of tweaks and hacks (e.g.composable auto-imports, custom components, etc.). But I'm now trying to work on a Storybook Nuxt Framework that would just plug itself to a running Nuxt server instance and add a /storybook
route to view all your stories within a Nuxt context :)