[Bug]: Vue code snippets incorrect after 8.3

[justingish]

Describe the bug

After updating to anything past 8.3, most of our autodoc code snippets are incorrect and can no longer be copied/pasted.

Here is a very simple example:

Prior to 8.3

After 8.3

The issue is that for some of our stories, we are simply passing Vuetify components into the story and documenting how we want them used internally rather that exporting our own components. For some reason, the code snippets are replacing the code we wrote and rewriting it using a component that doesn't actually exist (in this case v-btn changes to Button).

I suspect this comes from the Vue code snippet improvements done in this PR, but I haven't been able to figure out a way to get around it without simply downgrading to 8.2.9.

If there is a config or some other option that I'm missing, I'd love to hear it.

Reproduction link

https://stackblitz.com/edit/github-d6xn5f?file=.storybook%2Fmain.ts

Reproduction steps

1. In the Preview pane, open the Show Code panel
2. You'll see that the code shows Button instead of v-btn

System

Storybook Environment Info:

  System:
    OS: macOS 14.6.1
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.1 - ~/.nvm/versions/node/v20.12.1/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 10.9.1 - ~/source/shared-components/node_modules/.bin/npm <----- active
    pnpm: 9.9.0 - ~/.nvm/versions/node/v20.12.1/bin/pnpm
  Browsers:
    Chrome: 131.0.6778.86
    Safari: 18.1
  npmPackages:
    @storybook/addon-a11y: ^8.4.5 => 8.4.5 
    @storybook/addon-designs: ^8.0.4 => 8.0.4 
    @storybook/addon-essentials: ^8.4.5 => 8.4.5 
    @storybook/addon-interactions: ^8.4.5 => 8.4.5 
    @storybook/addon-links: ^8.4.5 => 8.4.5 
    @storybook/addon-themes: ^8.4.5 => 8.4.5 
    @storybook/addon-viewport: ^8.4.5 => 8.4.5 
    @storybook/blocks: ^8.4.5 => 8.4.5 
    @storybook/test: ^8.4.5 => 8.4.5 
    @storybook/vue3: ^8.4.5 => 8.4.5 
    @storybook/vue3-vite: ^8.4.5 => 8.4.5 
    chromatic: ^11.18.1 => 11.18.1 
    eslint-plugin-storybook: ^0.11.1 => 0.11.1 
    storybook: ^8.4.5 => 8.4.5

Additional context

No response

[Ei-aaie]

Hello, I have the same kind of issue here. It's kind of critical for my upgrades.

I had to upgrade Storybook to fix an OOM error when building my storybook. It's probably due to vue 3.5.x that I'm using, I don't know.
But by downgrading vue to 3.4.x it's building normally.

Since storybook 8.3 though, all my stories using template components are broken, the source code is not displaying any slot
template components official docs

Is there any change related to the way we have to construct stories with templates ?

[kitsune7]

For the PR that's linked in the description, line 71 of code/renderers/vue3/src/docs/sourceDecorator.ts shows the following code:

const componentName = displayName || ctx.title.split('/').at(-1)!;

I think what's happening is that on line 67, where we get the display name, if parseDocgenInfo(ctx.component) fails to get an object with a truthy displayName back, it's assumed that the title given in the metadata for the Story matches up with the name of the component (or at least that it would be better than nothing).

[kitsune7]

As an odd workaround, you could set the __name property directly on the component being imported. It feels like there should definitely be a better solution, but it does work.

For example:

import { VBtn } from 'vuetify/components';

VBtn.__name = 'v-btn';
// ...

This doesn't seem to work for more complex cases that use slots with many nested components though. All of those are still getting thrown out.