Join the Nuxt Team at Frontend Nation 4-7 June.

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

npx nuxi@latest module add storybook

Update your nuxt.config:

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

Then run pnpm dev to start you Nuxt server.

Demo

https://github.com/storybook-vue/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 Nuxt 3 / Storybook 7

Nuxt 2

Nuxt 2 is supported with Storybook v6,you can check legacy code on the v4 branch.

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