[Feature Request]: @storybook/vue3 not support defineExpose?

[Jansschen]

Is your feature request related to a problem? Please describe

@storybook/vue3 support methods but not support defineExpose?

Describe the solution you'd like

when support

Describe alternatives you've considered

No response

Are you able to assist to bring the feature to reality?

no

Additional context

No response

[pixel-fabian]

Would be great if storybook can support defineExpose for documentation of vue components.

vue-docgen-api should already support it: vue-styleguidist/vue-styleguidist#1447

[chakAs3]

there is a PR #22285 addresses this, not yet merge

[larsrickert]

Fixed with #22285 in version 8

[Hiroshiba]

While issue #22285 has enabled the documentation of exposed values in Storybook for Vue3, it seems that accessing these values directly is still not possible.

In Vue3, the defineExpose directive allows components to explicitly expose certain values for external use (Vue3 defineExpose documentation).
However, even with the update to version 8, it appears that these exposed values cannot yet be referenced from a Story.
I believe this issue might have intended to address that limitation.
Could we consider reopening this issue to fully resolve the functionality as initially requested?

[larsrickert]

However, even with the update to version 8, it appears that these exposed values cannot yet be referenced from a Story.

Hey @Hiroshiba, what do you mean with „can not be referenced from a Story“?

Could you please add an example code snippet about what you want to achieve? :)

[Hiroshiba]

Thank you for your prompt response, @larsrickert!

I've put together a sample code snippet to illustrate my point. Apologies if the syntax isn't the latest, I might be a bit behind on the updates.

You can see the setup here:
https://stackblitz.com/edit/vue-3-composition-api-demo-h8zzfu?file=src%2Fcomponents%2FCounter.stories.js

If you run npm run storybook, you should be able to see it in action. The autodoc feature in Storybook correctly recognizes the count under the EXPOSE section in the documentation because I have used defineExpose({count}) within Counter.vue.

However, I believe there is still no provided method to access this count value directly in the Counter.stories.js. This is the functionality I was referring to that seems to be missing.

[larsrickert]

@Hiroshiba Thanks for the reproduction :) I don't see the usage of count in the Counter.stories.js file and I am still not 100% if I understood you correctly but if you want to access exposed values in your render function, you can e.g. achieve it by changing your example like this:

import { ref } from "vue";

const Template = (args) => ({
  components: { Counter },
  setup() {
    const counterRef = ref();
    return { args, counterRef };
  },
  template: `
  <div>Exposed count: {{ counterRef?.count }}</div>
  <Counter ref="counterRef" v-bind="args"/>`,
});

[Hiroshiba]

Thanks for the clarification and the modified example, @larsrickert!

I see your point about modifying the component code to allow external state manipulation, similar to React. Indeed, if we alter the component’s code, it becomes possible.

However, my concern lies with the fact that Storybook does not yet support referencing exposed values directly through its official features, which is a key aspect of Vue. Supporting this would reduce one barrier for Vue developers who write standard Vue code when starting with Storybook.

On a related note, while Vue's expose functionality can lead to tightly coupled code, which has its pros and cons, it can be quite useful if mastered. For instance, it's beneficial for exposing internal values for testing purposes (which aligns with my needs), or when library dependencies require parent components to access HTML elements exposed by child components.

[larsrickert]

Using template refs for data exposed with defineExpose() is the official/standard Vue code for this, see the Vue docs.

If you want to still request a new Storybook feature, please add an example code snippet with a suggestion how the feature should work / look like :)