@storybook-vue/nuxt

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:

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

Changelog

v8.3.3

compare changes

🩹 Fixes

• Use storybook vitest config as base (#740)
• Readd vue-tempate-compilation plugin (#831)
• Nuxt App created only when story vue app rendered first time, (#830)

🏡 Chore

• Add test for using decorators in stories (#823)

❤️ Contributors

• Chakir QATAB (@chakAs3)
• Tobias Diez [e-mail]
• Ryan Leckey (@mehcode)