From b96802aae82be89a7160179013d584c25de0aaa4 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Tue, 25 Jun 2024 20:06:09 +0800 Subject: [PATCH 01/10] docs: update installation instructions to use new storybook cli --- .vscode/settings.json | 5 +- docs/content/0.index.md | 2 +- docs/content/1.getting-started/1.setup.md | 57 +++++++++++++++++------ package.json | 5 +- 4 files changed, 50 insertions(+), 19 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index eb8204b6..88a118f6 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,6 @@ { - "eslint.experimental.useFlatConfig": true + "eslint.experimental.useFlatConfig": true, + "cSpell.words": [ + "Nuxt" + ] } diff --git a/docs/content/0.index.md b/docs/content/0.index.md index cf58e63f..e373dff0 100644 --- a/docs/content/0.index.md +++ b/docs/content/0.index.md @@ -16,7 +16,7 @@ secondary: - Star on GitHub → - https://github.com/nuxt-modules/storybook -snippet: npx nuxi@latest module add storybook +snippet: npx storybook@latest init --- diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md index f5f877a8..b14d7ae9 100644 --- a/docs/content/1.getting-started/1.setup.md +++ b/docs/content/1.getting-started/1.setup.md @@ -1,39 +1,66 @@ # Setup -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. Just run: -```bash -npx nuxi@latest module add storybook +::code-group + +```bash [pnpm] +TODO +``` + +```bash [yarn] +TODO ``` -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. +For more details and the next steps, we refer to the [official Storybook documentation](https://storybook.js.org/docs/get-started/install). + +Alternatively, follow these steps to manually install and configure Storybook: + +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 +``` + +```bash [pnpm] +pnpm i -D @nuxtjs/storybook +``` + +```bash [yarn] +yarn add -D @nuxtjs/storybook ``` -```ts [nuxt.config (Nuxt 2)] -export default { - buildModules: ['@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'], +}) +``` + ::alert{type="success"} That's it! You can now use `Storybook` in your Nuxt app ✨ :: ::alert{type="info"} -Discover your Stories directly with the `Storybook Devtools tab`. +Discover your Stories directly within the `Storybook Devtools tab`. :: ## Storybook config Files diff --git a/package.json b/package.json index 71492e1f..2395b146 100755 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "nuxt-storybook", + "name": "@nuxtjs/storybook", "version": "", "license": "MIT", "repository": "nuxt-modules/storybook", @@ -33,7 +33,8 @@ "prepack": "pnpm build", "release": "pnpm jiti prepare-release.ts && pnpm publish --recursive", "prepare": "nuxi prepare playground", - "docs:build": "(cd docs && nuxi build)", + "docs:dev": "nuxi dev docs", + "docs:build": "nuxi build docs", "docs:generate": "nuxi generate docs", "test": "vitest run", "test:watch": "vitest watch", From 058ee069f5267534dfe84ae16249cf6cca241c3a Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Wed, 26 Jun 2024 07:13:42 +0200 Subject: [PATCH 02/10] finish --- docs/content/1.getting-started/1.setup.md | 42 +++++++++++++++++++---- 1 file changed, 36 insertions(+), 6 deletions(-) diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md index b14d7ae9..6fefb562 100644 --- a/docs/content/1.getting-started/1.setup.md +++ b/docs/content/1.getting-started/1.setup.md @@ -2,16 +2,16 @@ ## Installation -The Storybook CLI provides a very convenient way to install Storybook and the Nuxt integration. Just run: +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: ::code-group ```bash [pnpm] -TODO +pnpm dlx storybook@latest init ``` ```bash [yarn] -TODO +yarn dlx storybook@latest init ``` ```bash [npm] @@ -21,9 +21,9 @@ 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. -For more details and the next steps, we refer to the [official Storybook documentation](https://storybook.js.org/docs/get-started/install). +Please consult the [Storybook documentation](https://storybook.js.org/docs/get-started/install) for more information. -Alternatively, follow these steps to manually install and configure Storybook: +Alternatively, you can install Storybook and the Nuxt module manually. 1. Add `@nuxtjs/storybook` as a development dependency to your project: @@ -56,13 +56,43 @@ export default defineNuxtConfig({ ``` ::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 (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 +``` + +:: + +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 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: From e2ef4e0f6ba89be7066e65a0c4305c72445f730e Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Wed, 26 Jun 2024 07:17:44 +0200 Subject: [PATCH 03/10] fix linter --- .vscode/settings.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 88a118f6..f2fd50c1 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,6 +1,4 @@ { "eslint.experimental.useFlatConfig": true, - "cSpell.words": [ - "Nuxt" - ] + "cSpell.words": ["Nuxt"] } From 043c637c62a54521c0e86ea3fdcf7256fe957225 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Wed, 26 Jun 2024 07:19:51 +0200 Subject: [PATCH 04/10] fix package name --- package.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 2395b146..f8e21f1f 100755 --- a/package.json +++ b/package.json @@ -1,5 +1,6 @@ { - "name": "@nuxtjs/storybook", + "name": "nuxt-storybook", + "private": true, "version": "", "license": "MIT", "repository": "nuxt-modules/storybook", From 220dfadb13c1e21b3164963efde081f1517f1450 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Thu, 11 Jul 2024 20:31:05 +0200 Subject: [PATCH 05/10] update starter --- examples/starter/app.vue | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/starter/app.vue b/examples/starter/app.vue index a495b757..09f935bb 100644 --- a/examples/starter/app.vue +++ b/examples/starter/app.vue @@ -1,5 +1,6 @@ From 8fc1bb66589779aec860d9adb3b48f0ad7655a98 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sat, 13 Jul 2024 22:56:57 +0800 Subject: [PATCH 06/10] Update docs/content/1.getting-started/1.setup.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala --- docs/content/1.getting-started/1.setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md index f3ada82f..cde87406 100644 --- a/docs/content/1.getting-started/1.setup.md +++ b/docs/content/1.getting-started/1.setup.md @@ -5,7 +5,7 @@ description: Using Storybook in your Nuxt project is only one command away ✨ ## Installation -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: +The Storybook CLI provides a convenient way to integrate Storybook with Nuxt. Run the following command in your project's root directory: ::code-group From bc38ab472a37a511c60dabbd1bd260febcd80438 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sat, 13 Jul 2024 22:57:13 +0800 Subject: [PATCH 07/10] Update docs/content/1.getting-started/1.setup.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala --- docs/content/1.getting-started/1.setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md index cde87406..7a64de71 100644 --- a/docs/content/1.getting-started/1.setup.md +++ b/docs/content/1.getting-started/1.setup.md @@ -23,7 +23,7 @@ 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. +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. From 8cbf783078596b9455cbe09c94d09cdf14af1a9d Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sat, 13 Jul 2024 22:57:25 +0800 Subject: [PATCH 08/10] Update docs/content/1.getting-started/1.setup.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala --- docs/content/1.getting-started/1.setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md index 7a64de71..e9505b7f 100644 --- a/docs/content/1.getting-started/1.setup.md +++ b/docs/content/1.getting-started/1.setup.md @@ -64,7 +64,7 @@ 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`). +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 From 8ad9a4f73a1a02fe5ac7a89665fea6564e347c89 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sat, 13 Jul 2024 22:57:34 +0800 Subject: [PATCH 09/10] Update docs/content/1.getting-started/1.setup.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala --- docs/content/1.getting-started/1.setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md index e9505b7f..17770dc0 100644 --- a/docs/content/1.getting-started/1.setup.md +++ b/docs/content/1.getting-started/1.setup.md @@ -87,7 +87,7 @@ storybook dev -p 6006 :: -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)). +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"} From 55b28e6a0f09fd2b02c3e46d69a44a4f548e2480 Mon Sep 17 00:00:00 2001 From: Tobias Diez Date: Sat, 13 Jul 2024 22:57:45 +0800 Subject: [PATCH 10/10] Update docs/content/1.getting-started/1.setup.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Damian Głowala --- docs/content/1.getting-started/1.setup.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started/1.setup.md index 17770dc0..37d64ae6 100644 --- a/docs/content/1.getting-started/1.setup.md +++ b/docs/content/1.getting-started/1.setup.md @@ -94,7 +94,7 @@ The Storybook server will automatically detect changes to your stories and updat 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). +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). ## Storybook config Files