Getting Started
Setup
Using Storybook in your Nuxt project is only one command away ✨
Installation
- Install
@nuxtjs/storybook
dependency to your project:
npx nuxi@latest module add storybook
- Add it to your
modules
section in yournuxt.config
:
export default defineNuxtConfig({
modules: ['@nuxtjs/storybook'],
})
That's it! You can now use Storybook
in your Nuxt app ✨
Discover your Stories directly with the Storybook Devtools tab
.
Storybook config Files
When running npm run dev
, this module will look for these files:
.storybook/main.{ts,js}
.storybook/preview.{js,cjs,mjs,ts}
If these files don't exist, the module will automatically generate a basic configuration for them, so you don't have to create these files manually.
You can create these files by running the following command:
npx storybook-nuxt init
If you want to auto launch storybook after init pass --start
If you want to enable Nuxt module pass --enable-module
Options
You can customize the module's behavior by using the storybook
property in nuxt.config
:
nuxt.config
export default defineNuxtConfig({
storybook: {
// Options
url: 'http://localhost:6006',
port: 6006,
},
})
See the module options.