gravitano / storybook-nuxt

Storybook integration for Nuxt Framework - Unleashing the power of Storybook in Nuxt/Vue Land!"

Storybook for Nuxt framework

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

https://www.veed.io/embed/1f9d58b6-3c76-43a1-a15e-ae95af8dff5f

Demos

• Simple Demo storybook7-nuxt3-demo or try it on Stackblitz

• Demo with more plugins i18n+pinia try it on Stackblitz

• Full Demo i18n, Pinia, Composables,Vuetify,and Routing try it on Stackblitz

Storybook module for setup:

Storybook Nuxt-Module

Storybook Nuxt-Module Demo

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

storybook-nuxt-devtools.mov

Requirements

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

Getting Started

In a project without Storybook

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

npx 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:

// .storybook/main.js
export default {
  // ...
  framework: {
    name: '@storybook-vue/nuxt', // Add this
    options: {},
  },
}

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: [e-mail]

💬 Discord: ChakAs3

🐦‍⬛ Twitter: @ChakirQatab