storybook

storybook

Easily integrate Storybook in your Nuxt application to design, build, and organize your UI components in isolation.

Nuxt Storybook

Nuxt Storybook

Integrate Storybook into your Nuxt application.

Installing

pnpm add -D @storybook-vue/nuxt-storybook

Update your nuxt.config:

  modules: [    '@storybook-vue/nuxt-storybook',  ],  storybook: {    url: 'http://localhost:6006',    storybookRoute: '/__storybook__',    port: 6006,  },

Then run pnpm dev to start you Nuxt server.

Demo

https://github.com/chakAs3/nuxt-storybook-module-demo

Features

๐Ÿ‘Œ Zero configuration to start (see video) ๐Ÿช„ Access Storybook Terminal ๐ŸŽจ Devtools tab with Storybook app โš™๏ธ Reference your Storybook config in your app ๐Ÿ“ฆ Extendable by Nuxt modules ๐Ÿš€ Supports both Nuxt 3 and Nuxt 2

Contributing

  1. Install dependencies with pnpm.
  2. Run pnpm dev:prepare to generate stubbed dist directory.
  3. Make your changes.
  4. Run pnpm lint to verify that there is no issues (consider adding tests).
  5. Submit a PR.

License

This repository is licensed under the MIT License. Feel free to use the code and modify it according to your needs.

Contacts :

๐Ÿ”– Mail: javachakir@gmail.com

๐Ÿ’ฌ Discord: ChakAs3

๐Ÿฆโ€โฌ› Twitter: @ChakirQatab