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

[luca-smartpricing]

Environment

• Operating System: Darwin
• Node Version: v20.18.0
• Nuxt Version: 3.13.2
• CLI Version: 3.14.0
• Nitro Version: 2.9.7
• Package Manager: [email protected]
• Builder: -
• User Config: -
• Runtime Modules: -
• Build Modules: -

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]

@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;