nuxt-modules / storybook

Storybook integration with Nuxt.
https://storybook.nuxtjs.org
411 stars 95 forks source link

Doen't work with `compatibilityVersion: 4` and `/app` folder #805

Open luca-smartpricing opened 1 month ago

luca-smartpricing commented 1 month ago

Environment

Reproduction

https://stackblitz.com/edit/github-xhr4cw?file=.storybook%2Fpreview.js

Describe the bug

But i'm sure that with nuxt compatibilityVersion: 4 with components under the app folder when you use slots in a story render function, it doesn't work (don't render the template).

  render: (args) => ({
    components: { CustomComponent },
    setup() {
      return { args }
    },
    template: '<CustomComponent v-bind="args">Hello</CustomComponent>',
  }),

Additional context

No response

bnachtweh commented 1 month ago

@luca-smartpricing I'm not sure if this fixes your issue, but I ran into the same issue. It also seems that you need to run the Nuxt dev server to be able to run Storybook in the first place. Otherwise other Nuxt related implementations will trigger errors in my Storybook env. The problem with the Nuxt dev server is that the Vue alias that is resolved seems to be the runtime variant (vue.runtime.esm-bundler.js).

Overriding the Vite config for Storybook to use the "regular" esm builder could allow you to view your components with the template option again. Can you try this (specifically the viteFinal option):

Obviously this is something that needs to be addressed, buy maybe you could continue your work with this fix in the meantime.

// .storybook/main.ts
import type { StorybookConfig } from '@storybook-vue/nuxt';
import { mergeConfig } from 'vite';

const config: StorybookConfig = {
  stories: ['../stories/**/*.stories.ts'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
  ],
  framework: '@storybook-vue/nuxt',
  docs: {
    autodocs: 'tag',
  },
  async viteFinal(config) {
    return mergeConfig(config, {
      resolve: {
        alias: {
          vue: 'vue/dist/vue.esm-bundler.js',
        },
      },
    });
  },
};
export default config;