Storybook Integration with Vuetify and Nuxt: A Remarkable Journey

[jdassin]

For a long time, I've been on the lookout for a seamless way to integrate Storybook with my Vuetify library. Recently, with the release of Storybook 7, the Vue integration has significantly improved. Utilizing the repository vue3-code-examples, I could effortlessly structure my entire UI component, which is based on Vuetify.

However, as our project grew, we decided to transition to Nuxt, necessitating a robust framework. Unfortunately, Storybook lacked native support for Nuxt, making it challenging to configure appropriately. Just two days ago, I stumbled upon two enlightening blog posts on Medium that left me in awe. Check it out for yourself: Tutorial: Integrating Storybook with Vuetify in Your Nuxt Application.

The same individual who maintains the core of Vue Storybook has released a zero-config module and package to seamlessly integrate Storybook with Nuxt. Now, I can seamlessly integrate Storybook into our large Nuxt app with Vuetify and Pinia—leveraging the full spectrum of Nuxt modules. Isn't that just awesome?

I reached out to the maintainer to express my gratitude and seek guidance on a specific issue. To my astonishment, when I inquired about compensation for his remarkable efforts, he mentioned he does all of this voluntarily, without expecting any monetary rewards. He dedicates over six hours a day, even on Sundays, to maintain and enhance the Vue and Nuxt implementations. This left me in awe, contemplating how one could dedicate such extensive effort for six months, helping numerous developers solve their problems, without seeking any compensation.

I've shared this story here to assist others who may be seeking help with Storybook integration and to encourage everyone to contribute to this exceptional individual's work by giving a star to his repositories.

https://github.com/chakAs3
https://github.com/storybook-vue/storybook-nuxt
https://nuxt.com/modules/storybook.