Docs/storybook7.x

docs/README.md

@@ -0,0 +1,22 @@
+# Documentation
+
+## Development
+
+```bash
+# install dependencies
+$ yarn install
+
+# serve with hot reload at localhost:3000
+$ yarn dev
+```
+
+Then you can start edit the [content](./content) directory.
+
+# Test for production
+
+```bash
+$ yarn generate
+$ serve dist/ # npm install -g serve
+```
+
+For detailed explanation on how things work, check out [Nuxt.js docs](https://nuxtjs.org).

docs/_redirects

@@ -0,0 +1,6 @@
+/setup /getting-started/installation 301!
+/usage /getting-started/usage 301!
+/commands /getting-started/commands 301!
+/options /api/options 301!
+/api /api/hooks 301!
+/manual-setup /advanced/manual-setup  301!

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

@@ -0,0 +1,47 @@
+# Installation
+
+Using Storybook in your NuxtJS project is only one command away ✨
+
+Add `@nuxtjs/storybook` dependency to your project:
+
+<code-group>
+
+ ```bash [pnpm]
+  pnpm add -D @nuxtjs/storybook
+  ```
+
+  ```bash [Yarn]
+  yarn add --dev @nuxtjs/storybook
+  ```
+
+  ```bash [NPM]
+  npm install --save-dev @nuxtjs/storybook
+  ```
+
+</code-group>
+
+<alert type="warning">
+Note: Nuxt Storybook requires `nuxt >=3.0.0`. You can either use latest version of `nuxt` or install `nuxt-edge` package instead.
+</alert>
+
+That's it ✨!
+
+Now you can start adding [stories](/getting-started/usage).
+
+## Configuration
+
+Then, add `storybook` section in `nuxt.config.js`:
+
+```js[nuxt.config.(js/ts)]
+ modules: [
+    '@nuxtjs/storybook',
+  ],
+  storybook: {
+    url: 'http://localhost:6006',
+    storybookRoute: '/__storybook__',
+    port: 6006,
+  },
+
+```
+
+See [module options](/api/options).

docs/content/1.getting-started/2.usage.md

@@ -0,0 +1,54 @@
+---
+title: Usage
+description: 'Using Storybook with NuxtJS is simple, add your stories and run nuxt storybook command.'
+---
+
+First, we need to add the stories for our components, by default `@nuxtjs/storybook` will look into `~/components/**/*.stories.js`.
+
+```bash
+components/
+  Link.vue
+  Link.stories.js
+pages/
+  index.vue
+nuxt.config.js
+```
+
+<alert type="warning">
+
+The example below assumes you have the [`components: true`](https://github.com/nuxt/components#usage) option set in `nuxt.config`. If not, you will need to [import the components yourself](https://github.com/nuxt-community/storybook/issues/234#issuecomment-789655639).
+
+</alert>
+
+<code-group>
+
+  ```html [Link.vue]
+  <template>
+    <nuxt-link to="https://nuxtjs.org">
+      NuxtJs
+    </nuxt-link>
+  </template>
+  ```
+
+
+  ```js [Link.stories.js]
+  export default {
+    title: 'Link'
+  }
+
+  export const NuxtWebsite = () => '<Link />'
+  ```
+
+</code-group>
+
+Then we can run the [development command](/getting-started/commands#development) with `npx nuxt storybook` and go to [http://localhost:3003](http://localhost:3003), you will see our first story:
+
+![nuxt-storybook-screenshot](/screenshot.png)
+
+<alert type="info">
+
+You can extend where `@nuxtjs/storybook` will load the stories in the [stories option](/api/options#stories).
+
+</alert>
+
+Learn more about [writing stories for your Vue components](https://storybook.js.org/docs/guides/guide-vue/#step-4-write-your-stories) on Storybook official documentation.

docs/content/1.getting-started/3.commands.md

@@ -0,0 +1,92 @@
+---
+title: Commands
+description: '@nuxtjs/storybook is shipped with multiple commands, making easy to develop or ship the UI for production'
+position: 3
+category: Guide
+---
+
+`@nuxtjs/storybook` is shipped with multiple commands, making easy to develop or ship the UI for production.
+
+## Development
+
+To start Storybook in development environment:
+
+<code-group>
+
+  ```bash [Yarn]
+  yarn nuxt storybook
+  ```
+
+  ```bash [NPM]
+  npx nuxt storybook
+  ```
+
+</code-group>
+
+By default, it will start the development server on [http://localhost:3003](http://localhost:3003), you can configure the port in the [options](/api/options#port) or with CLI options.
+
+### CLI Options
+Development command have some options you can pass to alter storybook behaviors.
+```
+-c, --config-file <file-path> Specify the path to nuxt.config.js file.
+-p, --port [number]           Port to run Storybook.
+-h, --host [string]           Host to run Storybook
+-s, --static-dir <dir-names>  Directory where to load static files from, comma-separated list. By default it loads Nuxt static dir
+--smoke-test                  Exit after successful start
+--ci                          CI mode (skip interactive prompts, don't open browser)
+--quiet                       Suppress verbose build output
+--tsconfig <file-path>        Specify the path to tsconfig.json file.
+```
+
+## Export
+
+Export your Storybook into a static web application to deploy it to GitHub pages or any static hosting service:
+
+<code-group>
+
+  ```bash [Yarn]
+  yarn nuxt storybook build
+  ```
+
+  ```bash [NPM]
+  npx nuxt storybook build
+  ```
+
+</code-group>
+
+By default this command will output a `storybook-static/` directory. See command option to change output directory.
+
+### CLI Options
+Build command have some options you can pass to alter storybook behaviors.
+```
+-c, --config-file <file-path> Specify the path to nuxt.config.js file.
+-s, --static-dir <dir-names>  Directory where to load static files from, comma-separated list. By default it loads Nuxt static dir
+-o, --output-dir [dir-name]   Directory where to store built files
+--tsconfig <file-path>        Specify tha path to tsconfig.json file.
+--quiet
+--webpack-stats-json <file-path> Must be set to the value of --output-dir, for
+use with Chromatic's TurboSnap feature
+```
+
+## Eject
+Generate manual config directory for Storybook
+
+<code-group>
+
+  ```bash [Yarn]
+  yarn nuxt storybook eject
+  ```
+
+  ```bash [NPM]
+  npx nuxt storybook eject
+  ```
+
+</code-group>
+
+This command will create a `storybook` directory and default configuration files.
+
+### CLI Options
+```
+-c, --config-file <file-path> Specify the path to nuxt.config.js file.
+--force  Force to overwrite config files if there are existed
+```

docs/content/2.api/1.hooks.md

@@ -0,0 +1,38 @@
+---
+title: Hooks
+description: '@nuxtjs/storybook provides a clean and simple way to integrate NuxtJS modules with Storybook.'
+---
+
+## Config Hook
+
+As of Version 3 `@nuxtjs/storybook` will provide API for modules to modify Storybook config and add their own stories. Modules can use `storybook:config` hook to access Storybook config and add their own stories.
+
+<alert type="info">
+It is highly recommended to create your stories under <code>Modules</code>. This is best way to keep storybook clean. Take a look at below example. <a href="https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy">Read more about naming</a>
+</alert>
+
+Here is a sample example:
+
+::code-group
+
+  ```js{}[my-module/index.js]
+  export default function() {
+    const { nuxt } = this
+
+    nuxt.hook('storybook:config', ({ stories }) => {
+      stories.push("my-module/stories/*.stories.js")
+    })
+  }
+  ```
+
+  ```js{}[my-module/awesome.stories.js]
+  export default {
+    title: "Moduels/Awesome Module"
+  }
+
+  export const awesomeStory = () => "<div>AWESOME</div>"
+  ```
+
+::
+
+Just like that, now everyone that uses `my-module` will see your story inside Storybook.