Components with mixins are not rendering the props table correctly

[leandromatos]

Version

@nuxtjs/storybook: 3.0.0
nuxt: 2.14.7

Reproduction Link

https://codesandbox.io/s/agitated-monad-x8qzw?file=/nuxt.config.js:258-274

Steps to reproduce

Just await the project starts

What is Expected?

In AwesomeButton, in the Props table, a property called "icon" should appear, which is inside the mixin used by the component.

What is actually happening?

Apparently, the configuration made for the addon @storybook/addon-docs inside nuxt.config.js is not working, as an error message appears in the terminal:

Neither '@/mixins/SomeMixin.vue' nor '@/mixins/SomeMixin.js(x)' or '@/mixins/SomeMixin/index.js(x)' or '@/mixins/SomeMixin/index.ts(x)' could be found in '/sandbox/components'

[elevatebart]

In your nuxt.config.js there is a weird line.

Since the nuxt.config.js is on the root of your project, I would use __dirname for @ instead

import { resolve } from "path";

export default {
  components: true,
  storybook: {
    stories: ["~/components/**/*.stories.mdx"],
    addons: [
      {
        name: "@storybook/addon-docs",
        options: {
          vueDocgenOptions: {
            alias: {
              // instead of path.resolve(__dirname, '../') use __dirname
              // that would take you in the parent directory of your project... hum
              "@": __dirname,
            },
          },
        },
      },
      "@storybook/addon-controls",
      "@storybook/addon-essentials",
    ],
  },
};

[leandromatos]

I'm sorry @elevatebart, this line was copied from another project of mine in which the settings of nuxt.config.js are inside a directory with modularized files.

Even changing to your suggestion, the error continues, see: https://codesandbox.io/s/agitated-monad-x8qzw?file=/nuxt.config.js:258-274

[elevatebart]

The expected options should be passed to this preset

https://github.com/storybookjs/storybook/blob/master/addons/docs/src/frameworks/vue/preset.ts

But here is the list of keys that are logged out for the options (there should be a vueDocgenOptions).

["configType",
"outputDir",
"cache",
"_events",
"_eventsCount",
"_maxListeners",
"commands",
"options",
"parent",
"_allowUnknownOption",
"_args",
"rawArgs",
"_scriptPath",
"_name",
"_optionValues",
"_storeOptionsAsProperties",
"_passCommandToAction",
"_actionResults",
"_actionHandler",
"_executableHandler",
"_executableFile",
"_defaultCommandName",
"_exitCallback",
"_aliases",
"_hidden",
"_helpFlags",
"_helpDescription",
"_helpShortFlag",
"_helpLongFlag",
"_hasImplicitHelpCommand",
"_helpCommandName",
"_helpCommandnameAndArgs",
"_helpCommandDescription",
"program",
"Command",
"Option",
"CommanderError",
"_version",
"_versionOptionName",
"versionUpdates",
"releaseNotes",
"dll",
"args",
"framework",
"rootDir",
"configDir",
"port",
"nuxt",
"nuxtBuilder",
"nuxtWebpackConfig",
"nuxtStorybookConfig",
"mode",
"staticDir",
"packageJson",
"ignorePreview",
"docsMode",
"versionCheck",
"releaseNotesData",
"presets",
"babelOptions",
"entries",
"stories",
"typescriptOptions",
"presetsList"]

Still investigating, but now this nuxt plugin looks like the right place to do so.

[elevatebart]

How is the storybook configuration transmitted to the dev-server?

https://github.com/nuxt-community/storybook/blob/master/src/index.ts#L16

This line tends to send a very nuxt specific block to a storybook function, is it picked up later by another tool that adapts it for storybook? Am I missing something?

[leandromatos]

I didn't understand your question very well @elevatebart.

@farnabaz, can you help us understand what's going on?

[elevatebart]

I am wondering how the addon options are meant to be transmitted from nuxt.config.js to storybook in the internals of the current plugin.

Indeed, storybook loaders do not receive the options they are meant to. So vue-docgen-api does not get it either and fails.

[leandromatos]

The storybook even receives the options that are passed in Nuxt Config, but mysteriously, the vueDocgenOptions option (line 12 https://codesandbox.io/s/agitated-monad-x8qzw?file=/nuxt.config.js:258-274) is not passed on to the Storybook, so the vueDocgenOptions options are never applied.

Is this the conclusion that you also reached @elevatebart ?

[elevatebart]

Yep exactly

[leandromatos]

I'm confused, I don't know if it's a nuxtjs/storybook or storybook bug.

@shilman Can you help us investigate this problem as well?

[elevatebart]

After trying it out on storybook, I am pretty sure it's a nuxt/storybook bug.

[leandromatos]

@elevatebart Have you tested the storybook on a pure Vue project? Do vueDocgenOptions options work on this project?

I would like to see more details. Can you create this project on CodeSandbox?

I can try to investigate the Nuxt plugin for Storybook more deeply.

[farnabaz]

Sorry for the late response. I tried to use vueDocgenOptions with the vanilla storybook and my attempts are failed. Did you manage to user vueDocgenOptions without NuxtStorybook?

Anyway @ is an internal alias in Nuxt and it should be available out of the box.