Skip to content

Commit

Permalink
docs: update installation instructions to use new Storybook CLI (#659)
Browse files Browse the repository at this point in the history
Using the nuxt support in the storybook cli added in
storybookjs/storybook#26884.

Fixes #841 and fixes
#840 and fixes
#721

---------

Co-authored-by: Damian Głowala <damian.glowala.rebkow@gmail.com>
  • Loading branch information
tobiasdiez and DamianGlowala authored Jan 16, 2025
1 parent 23c52c6 commit f452091
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 15 deletions.
87 changes: 73 additions & 14 deletions docs/content/1.getting-started/1.setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,40 +5,99 @@ description: Using Storybook in your Nuxt project is only one command away ✨

## Installation

1. Install `@nuxtjs/storybook` dependency to your project:
The Storybook CLI provides a convenient way to integrate Storybook with Nuxt. Run the following command in your project's root directory:

```bash
npx nuxi@latest module add storybook
::code-group

```bash [pnpm]
pnpm dlx storybook@latest init
```

```bash [yarn]
yarn dlx storybook@latest init
```

2. Add it to your `modules` section in your `nuxt.config`:
```bash [npm]
npx storybook@latest init
```

::

This command will install Storybook along with the Nuxt module, set up the necessary scripts to configure Storybook, and add some boilerplate stories to get you started.
Please consult the [Storybook documentation](https://storybook.js.org/docs/get-started/install) for more information.

Alternatively, you can install Storybook and the Nuxt module manually.

1. Add `@nuxtjs/storybook` as a development dependency to your project:

::code-group

```ts [nuxt.config (Nuxt 3)]
export default defineNuxtConfig({
modules: ['@nuxtjs/storybook'],
})
```bash [nuxi]
npx nuxi@latest module add storybook
```

```ts [nuxt.config (Nuxt 2)]
export default {
buildModules: ['@nuxtjs/storybook'],
}
```bash [pnpm]
pnpm i -D @nuxtjs/storybook
```

```bash [yarn]
yarn add -D @nuxtjs/storybook
```

```bash [npm]
npm install -D @nuxtjs/storybook
```

::

2. If not using `nuxi` above, add the module `@nuxtjs/storybook` to your Nuxt configuration:

```ts [nuxt.config.ts]
export default defineNuxtConfig({
modules: ['@nuxtjs/storybook'],
})
```

3. Prepare [Storybook config files](#storybook-config-files).

::alert{type="success"}
That's it! You can now use `Storybook` in your Nuxt app ✨
That's it! You can now use Storybook in your Nuxt app ✨
::

## Usage

When you run your Nuxt app in development mode, the Storybook server will automatically start in the background. The URL to access Storybook will be displayed in the console (`http://localhost:6006` by default).
If you want to start Storybook without running your Nuxt app, you can use the following command:

::code-group

```bash [pnpm]
pnpm run storybook
```

```bash [yarn]
yarn storybook
```

```bash [npm]
npm run storybook
```

```bash [manual]
storybook dev -p 6006
```

::

When you install Storybook using the CLI, you will find a few stories in the `components` directory to get you started. You can add your own stories to this directory or create a new directory for your stories (in which case you will need to update the [Storybook configuration](/storybook/config)).
The Storybook server will automatically detect changes to your stories and update the UI accordingly.

::alert{type="info"}
Discover your Stories directly with the `Storybook Devtools tab`.
Discover your Stories directly within the `Storybook Devtools tab`.
::

For more information on how to write stories and the next steps, refer to the [Storybook documentation](https://storybook.js.org/docs/get-started/whats-a-story).

### Nightly Builds

The nightly release channel allows you to test the latest updates and features, directly from the most recent commits. This is useful for experimenting with new features, improvements, and bug fixes before they are included in the stable release.
Expand Down
2 changes: 1 addition & 1 deletion docs/content/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ hero:
size: lg
code: |
```bash [Terminal]
npx nuxi@latest module add storybook
npx storybook@latest init
```
features:
items:
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{
"name": "nuxt-storybook",
"private": true,
"version": "",
"license": "MIT",
"repository": "nuxt-modules/storybook",
Expand Down

0 comments on commit f452091

Please sign in to comment.