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:
Supported Features
๐ Nuxt Modules
๐ Nuxt Plugins
๐ All in-built Nuxt Components
๐ Sass/Scss
๐ 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
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: [email protected]
๐ฌ Discord: ChakAs3
๐ฆโโฌ Twitter: @ChakirQatab