[Feature Request]:Nuxt Support and/Examples

[sosensible]

Is your feature request related to a problem? Please describe

Getting the advantage of doing Storyboard for Nuxt 3 (the new current version) and to be noted there was no official support for Nuxt 2 and back previously.

Describe the solution you'd like

Guide and proven path to doing everything awesome Storybook does with Nuxt 3 solutions.

Describe alternatives you've considered

Using Vue... not desperate enough to migrate to React. Not bad tech, it's just not Vue to our team.

Are you able to assist to bring the feature to reality?

yes, I can

Additional context

We will help test and create examples. We are not Nuxt core team but will engage with all of the above, including posting online socially and training videos.

[sosensible]

Oh, link to the site...
https://nuxtjs.org/

[santiagoarizti]

I also would like an official way to do all the nuxt magic in storybook without too many hacks

[daguitosama]

Oh, link to the site... https://nuxtjs.org/

They move the Nuxt 3 stuf to https://nuxt.com .
If some one have a hack please share it here

[BudiSalah]

I have figured out how to use @storybook/vue3 V6 with Nuxt 3 V3.0.0, Follow these steps:

Before going through these steps, make sure to run yarn install or npm ci first!

1. Run npx storybook init --type vue3 (if you asked to Do you want to run the 'eslintPlugin' migration on your project? press Y
2. Run yarn add --dev @storybook/builder-vite (if you using Vite as your application bundler
3. In package.json scripts, add the following:

"serve-storybook": "npx http-server ./storybook-static"

4. In .storybook main.js file, extend module.exports object with:

core: {
   builder: '@storybook/builder-vite',
},

async viteFinal(config, { configType }) {
   if (configType === 'DEVELOPMENT') {
      return {
	...config,
	      define: {
	      ...config.define,
	      global: 'window',
	   },
	};
      }
   
   return config;
},

5. Create preview-head.html file inside .storybook folder and add:

<script>
   var global = window
</script>

6. Delete Introduction.stories.mdx file from stories folder

Now, you can run yarn storybook for development mode & yarn build-storybook for building your stories.

References:

• Install Storybook
• Storybook Vite
• Story rendering
• Preview/Manager templates
• Publish Storybook
• GH Issue: Vite + Storybook 6.3 + Jest: "global is not defined"
• YT: How to setup Storybook + Nuxt 3 + Tailwind CSS + Vite ? old but useful

[shilman]

Have you tried this? hirotaka/storybook-addon-nuxt