From f4520911258b8cae112f22ca9a981279a3ef9dad Mon Sep 17 00:00:00 2001
From: Tobias Diez <code@tobiasdiez.de>
Date: Thu, 16 Jan 2025 16:46:54 +0800
Subject: [PATCH] docs: update installation instructions to use new Storybook
 CLI (#659)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Using the nuxt support in the storybook cli added in
https://github.com/storybookjs/storybook/pull/26884.

Fixes https://github.com/nuxt-modules/storybook/issues/841 and fixes
https://github.com/nuxt-modules/storybook/issues/840 and fixes
https://github.com/nuxt-modules/storybook/issues/721

---------

Co-authored-by: Damian Głowala <damian.glowala.rebkow@gmail.com>
---
 docs/content/1.getting-started/1.setup.md | 87 +++++++++++++++++++----
 docs/content/index.yml                    |  2 +-
 package.json                              |  1 +
 3 files changed, 75 insertions(+), 15 deletions(-)

diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md
index 64aa3378..e33063f7 100644
--- a/docs/content/1.getting-started/1.setup.md
+++ b/docs/content/1.getting-started/1.setup.md
@@ -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.
diff --git a/docs/content/index.yml b/docs/content/index.yml
index 3efd2d08..6b4f7071 100644
--- a/docs/content/index.yml
+++ b/docs/content/index.yml
@@ -13,7 +13,7 @@ hero:
       size: lg
   code: |
     ```bash [Terminal]
-    npx nuxi@latest module add storybook
+    npx storybook@latest init
     ```
 features:
   items:
diff --git a/package.json b/package.json
index cc3e1a51..b3fbfeb3 100755
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "name": "nuxt-storybook",
+  "private": true,
   "version": "",
   "license": "MIT",
   "repository": "nuxt-modules/storybook",