Can't override a component to mock the component due to directory path.

[CraigDaveyHornby]

When using storybook with vue only the following code worked.

import { NuxtIcon } from './mock-components/NuxtIcon'

setup((app) => {
  app.component('nuxt-icon', NuxtIcon)
  app.component('nuxtIcon', NuxtIcon)
})

Now using storybook with nuxt this no longer works.

When loading the nuxt-icon component into a story its picks up the global one used on the site not the one in the mock-components directory

Can anyone help.

[tobiasdiez]

I think this needs changes upstream. Currently, storybook executes preview scripts in parallel, so there is no way to ensure that user-provided preview modifications are executed after the one provided by the nuxt module.

Perhaps changing https://github.com/storybookjs/storybook/blob/e49310d82ec8c653db977917c7c9c6442c93be27/code/renderers/vue3/src/render.ts#L31 to a simple for-loop would be enough. But I don't have the time to test this currently.