Autodocs page is missing props, emits and slots for Vue components in vue project

[Walnussbaer]

Summary

Yesterday I migrated from Storybook 7.6.17 to Storybook 8.2.7 using the official migration guide (https://storybook.js.org/docs/migration-guide)

Since then, the autodocs page is bascially empty, only showing the component and the source code, but no props, no emits and so on.

It only shows any controls if I explicitly set args in a story. If I don't set any args, the autodocs page is bascially empty.
EDIT: the problem is the same as described here: #28783, but for Vue instead of Angular

This is my component

<template>
  <div>{{ props.foo }}</div>
</template>

<script setup lang="ts">
  interface MyButtonProps {
    /** Hello World, this documentation should be shown in storybook without setting any args in a story */
    foo: string;
  }

  const props = withDefaults(defineProps<MyButtonProps>(), {
    foo: "Hello World",
  });
</script>

<style scoped></style>

This is my story:

import type { Meta, StoryObj } from "@storybook/vue3";
import MyButton from "../MyButton.vue";

const storyMeta: Meta<typeof MyButton> = {
  component: MyButton,
  title: "common/components/buttons/MyButton",
} satisfies Meta<typeof MyButton>;

export default storyMeta;
type MyButtonStory = StoryObj<typeof storyMeta>;
export const Primary: MyButtonStory = {};

This is what I get in storybook - bascially a useless page:

Project setup:

Storybook main.ts

/* Contains the main configuration of the storybook instance. */
import { quasar } from "@quasar/vite-plugin";
import type { StorybookConfig } from "@storybook/vue3-vite";
import vue from "@vitejs/plugin-vue";
import { readdirSync } from "fs";
import tsConfigPaths from "vite-tsconfig-paths";

const config: StorybookConfig = {
  stories: [
    {
      directory: "./docModules/gettingStarted",
      titlePrefix: "Getting Started",
    },
    {
      directory: "./docModules/branding",
      titlePrefix: "Branding",
    },
    {
      directory: "./../src",
      titlePrefix: "Library",
    },
    {
      directory: "./docModules/frameworks",
      titlePrefix: "Frameworks",
    },
  ],

  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "storybook-addon-mock",
  ],
  framework: {
    name: "@storybook/vue3-vite",
    options: {
      docgen: {
        plugin: "vue-component-meta",
        tsconfig: "tsconfig.json",
      },
    },
  },
  docs: {
    defaultName: "Docs",
  },
  viteFinal: async (config, { configType }) => {
    // fixes process is not defined error, that some stories had: https://stackoverflow.com/questions/76106082/upgrading-from-storybook-6-to-storybook-7-results-in-a-process-is-not-defined
    config.define = { "process.env": {} };

    if (config.plugins == undefined) {
      config.plugins = [];
    }

    // vue plugin for storybook, this is mandatory!
    config.plugins.push(vue());

    // the vite builder for storybook needs to know how to resolve our import statements, so we use the vite-tsconfig-paths plugin for that
    config.plugins.push(tsConfigPaths());

    // see https://storybook.js.org/docs/builders/vite#environment-based-configuration for reference
    config.base = configType == "DEVELOPMENT" ? "/" : "/storybook/";

    // we also need the vite quasar plugin to be able to embed our quasar based project (and it's components) into an existing (this storybook) project
    // see https://quasar.dev/start/vite-plugin/ for reference

    config.plugins.push(
      quasar({
        // required so that quasar is using our custom theme
        sassVariables: "../src/css/quasar.variables.scss",
      }),
    );

    config.assetsInclude = ["/sb-preview/runtime.js"]; // known storybook bug, https://github.com/storybookjs/storybook/issues/25256

    return config;
  },

  staticDirs: [
    {
      from: "../public/assets",
      to: "/assets",
    },
    {
      from: "../src/assets/fonts",
      to: "/assets/fonts",
    },
    {
      from: "../src/assets/animations/lottie",
      to: "/assets/animations/lottie",
    },
  ],
  typescript: {
    check: true,
  },
  // declare required env variables
  env: (existing) => {
    if (existing == undefined) {
      existing = {};
    }
   

    return existing;
  },
};
export default config;

Storybook preview.ts

import "@quasar/extras/material-icons/material-icons.css";
import { Preview, setup } from "@storybook/vue3";
import { createPinia, setActivePinia } from "pinia";
import { Dark, Notify, Quasar } from "quasar";
import "quasar/src/css/index.sass";
import { i18n } from "spa/boot/i18n";
import { DEFAULT_LOCALE, DEFAULT_THEME } from "spa/common/utils/***-defaults";
import { availableLanguages } from "spa/common/utils/***-languages";
import { availableThemes } from "spa/common/utils/***-themes";
import "spa/css/app.scss";
import { vueRouter } from "storybook-vue3-router";
import "./storybook.css";

import { Dialog } from "quasar";
import { setupIconMapper, setupStandardStoryBackground, switchLanguage, switchTheme, withEvents } from "./decorators";
import { mockCurrentUser, mockConfigStoreData } from "./mocks/storybook-mocking";

setup(async (app, context) => {
  const pinia = setActivePinia(createPinia());

  app.use(Quasar, {
    plugins: {
      Dark: Dark,
      Dialog: Dialog,
      Notify: Notify,
    },
  });

  app.use(pinia);
  app.use(i18n);

  mockCurrentUser();
  mockConfigStoreData();
});

const preview: Preview = {
  // global types that can be used in every story rendering context
  globalTypes: {
    language: {
      description: "The currently active language for the rendering context of the stories",
      defaultValue: DEFAULT_LOCALE,
      toolbar: {
        title: "Locale",
        // https://storybook.js.org/docs/react/faq#what-icons-are-available-for-my-toolbar-or-my-addon
        icon: "globe",
        items: availableLanguages,
        dynamicTitle: true,
      },
    },
    theme: {
      description: "The currently active theme for the rendering context of the stories",
      defaultValue: DEFAULT_THEME,
      toolbar: {
        title: "Theme",
        icon: "contrast",
        items: availableThemes,
        dynamicTitle: true,
      },
    },
  },

  // global decorators for every story, see https://storybook.js.org/docs/vue/writing-stories/decorators#global-decorators for reference
  decorators: [vueRouter([]), switchLanguage, switchTheme, setupStandardStoryBackground, setupIconMapper, withEvents],

  parameters: {
    useAlternateStoryBackground: false,
    actions: { argTypesRegex: "^on[A-Z].*" }, // TODO do we still need this with storybook 8?
    controls: {
      // see https://storybook.js.org/docs/react/essentials/controls#custom-control-type-matchers for reference
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
    docs: {
      controls: {
        sort: "requireFirst",
      },
      source: {
        language: "jsx",
      },
      canvas: {
        // always show source code of rendered component
        sourceState: "shown",
      },
      toc: true, // generate table of contents for component documentation pages
    },
    options: {
      storySort: {
        // see https://storybook.js.org/docs/vue/writing-stories/naming-components-and-hierarchy#sorting-stories for reference
        order: [
          "Getting Started",
          ["Welcome", "Storybook Explained"],
          "Branding",
          ["Colors", "Icons", "LottieFiles", "Assets", "LayoutingAndSpacing"],
          "Frameworks",
        ],
      },
    },
    mockAddonConfigs: {
      /* https://github.com/linearlabs-workspace/storybook-addon-mock/issues/148#issuecomment-1884530361
      --> Without globalMockData and disableUsingOriginal storybook would throw an error */
      globalMockData: [],
      disableUsingOriginal: false,
      ignoreQueryParams: true,
    },
  },

  tags: ["autodocs"],
};

export default preview;

Our projects lools like this:

.storybook
    .tsconfig 
    .main.ts
    .preview.ts
    // and some more stuff
  
src (this contains all the components)
.tsconfig
package.json and more
// and some more stuff

This is the .tsconfig in the .storybook folder:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "spa/*": ["./../src/*"]
    },
    "skipLibCheck": false,
    "types": ["vite/client"]
  },
  "extends": "./../tsconfig.json",
  "include": [
    "./docModules",
    "./storybook-auto-events.d.ts",
    "./env.d.ts",
    "./mocks",
    "./asset-tree-provider.ts",
    "./asset-tree.ts",
    "./decorators.ts",
    "./preview.ts"
  ]
}

I created a Storybook sandbox project using the Storybook CLI. The autodocs feature works fine there, but I don't see any difference to our project. The only difference is that the sandbox project uses a vite.config.ts, which we don't have. I tried that, but it created lots of problems since Vite couldn't translate our path aliases from the .tsconfig anymore (even though I was using the tsConfigPaths() plugin. So I discarded that approach and use viteFinal approach in the main.ts again.

Can someone tell me what I am missing here?

Additional information

Storybook Environment Info:

System:
OS: Windows 10 10.0.19045
CPU: (16) x64 AMD Ryzen 7 PRO 6850U with Radeon Graphics
Binaries:
Node: 18.16.0 - C:\Development\01_Laufzeitumgebungen\NodeJS\nodejs-18.16.0\node.EXE
npm: 9.5.1 - C:\Development\01_Laufzeitumgebungen\NodeJS\nodejs-18.16.0\npm.CMD <----- active
Browsers:
Edge: Chromium (127.0.2651.74)
npmGlobalPackages:
@storybook/cli: 8.2.7

Result of the storybook doctor:

Create a reproduction

No response

[Marklb]

I configured a sandbox similar to how I assume yours is and noticed the problem. So, I debugged the docgen plugin's transformer and saw the source code it received didn't look the same as what a vite.config.ts got. So, I moved the docgen plugin to the end of the array and it worked.

Try adding the following to the bottom of your viteFinal function.

const idx = (config.plugins as any).findIndex(x => x?.name === 'storybook:vue-docgen-plugin')
const plugin = config.plugins[idx]
config.plugins.splice(idx, 1)
config.plugins.push(plugin)

I don't know much about Vue, so I don't know if there is a known better way to handle this. All I did was follow the code and make it work.

[Walnussbaer]

Juste one more note: HMR still doesn't seem to work. When I update the component and add a slot, emit or prop, I have to restart storybook to see the change on the docs page. But still, way better than having no documentation at all :)

[Marklb]

Instead of moving "storybook:vue-docgen-plugin" to the end, you could try moving the vue plugin. In a default sandbox, it seems to be after "storybook:package-deduplication".
Could try:

// config.plugins.push(vue());
const idx = (config.plugins as any).findIndex(x => x?.name === 'storybook:package-deduplication')
config.plugins.splice(idx + 1, 0, vue());

---

After suggesting this, I saw #27514 and #26465, so my suggestion probably won't fix it.

[Walnussbaer]

Yes, I saw these HMR problems in other tickets too, so I assume the problem is not on my side. I will try your suggestion anyway after my vacation :)

[Walnussbaer]

@Marklb just for your information: your latest suggestion to fix the HMR problem did not work. Thanks anyway! :)

[sschneider-ihre-pvs]

I configured a sandbox similar to how I assume yours is and noticed the problem. So, I debugged the docgen plugin's transformer and saw the source code it received didn't look the same as what a vite.config.ts got. So, I moved the docgen plugin to the end of the array and it worked.

Try adding the following to the bottom of your viteFinal function.

const idx = (config.plugins as any).findIndex(x => x?.name === 'storybook:vue-docgen-plugin')
const plugin = config.plugins[idx]
config.plugins.splice(idx, 1)
config.plugins.push(plugin)

I don't know much about Vue, so I don't know if there is a known better way to handle this. All I did was follow the code and make it work.

const idx = (config.plugins as any).findIndex(x => x?.name === 'storybook:vue-component-meta')
config.plugins[idx] = { ...config.plugins[idx], enforce: "post" } as any

this also seems to do the trick