Storybook for Nuxt framework

Storybook package for Nuxt framework with zero configs. seamless integration supporting all Nuxt fancy features

https://github.com/storybook-vue/nuxt/assets/711292/e66a1899-ab7c-42dd-b358-59e22ff0f609

Supported Features

👉 Nuxt Modules

👉 Nuxt Plugins

👉 All in-built Nuxt Components

👉 Sass/Scss

👉 Css/Sass/Scss Modules

👉 JSX

👉 Postcss

👉 Auto Imports

👉 Runtime Config

👉 Composables

👉 Typescript (already supported out of the box by Storybook)

👉 Nuxt DevTools : finally as Bonus, Nuxt DevTools works amazingly with your Storybook, full features

https://github.com/storybook-vue/nuxt/assets/711292/63cc1fb3-ec6b-4df2-ad61-d87e5692f385

Requirements

• Nuxt >= 3.x
• Storybook >= 7.x

Demo

Checkout the demo repo storybook7-nuxt3-demo or try it on Stackblitz

Getting Started

In a project without Storybook

Follow the prompts after running this command in your Nuxt project's root directory:

1npx storybook-nuxt init

More on getting started with Storybook

Automatic migration

When running the upgrade command above, you should get a prompt asking you to migrate to @storybook-vue/nuxt, which should handle everything for you. In case auto-migration does not work for your project, refer to the manual migration below.

Update your main.js to change the framework property:

1// .storybook/main.js
2export default {
3  // ...
4  framework: {
5    name: '@storybook-vue/nuxt', // Add this
6    options: {},
7  },
8}

Documentation

In progress

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