docs: update installation instructions to use new Storybook CLI

docs/content/1.getting-started/1.setup.md

@@ -5,38 +5,97 @@ 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 very convenient way to install Storybook and the Nuxt integration. 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
+```
+
+```bash [npm]
+npx storybook@latest init
 ```
 
-2. Add it to your `modules` section in your `nuxt.config`:
+::
+
+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)]
+```bash [nuxi]
+npx nuxi@latest module add 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'],
 })
 ```
 
-```ts [nuxt.config (Nuxt 2)]
-export default {
-  buildModules: ['@nuxtjs/storybook'],
-}
+::alert{type="success"}
+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 (usually `http://localhost:6006`).
+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
+```
 
-::alert{type="success"}
-That's it! You can now use `Storybook` in your Nuxt app ✨
 ::
 
+When you installed 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, we refer to the [Storybook documentation](https://storybook.js.org/docs/get-started/whats-a-story).
+
 ## Storybook config Files
 
 When running `npm run dev`, this module will look for these files:

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:

examples/starter/app.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+    <NuxtRouteAnnouncer />
     <NuxtWelcome />
   </div>
 </template>

package.json

@@ -1,5 +1,6 @@
 {
   "name": "nuxt-storybook",
+  "private": true,
   "version": "",
   "license": "MIT",
   "repository": "nuxt-modules/storybook",