How it support actions for vue in storybook?

[wanhuihan]

I tried several times for this issue, found that mostly it support react.js, not vue.js.
I want to make the click event work in actions, how to solve it? thanks.

[shilman]

AFAIK actions works for all frameworks including vue. you can see it working in our vue example apps e.g. https://next--storybookjs.netlify.app/vue-kitchen-sink/

[lostdesign]

• Install and add '@storybook/addon-actions', to your main.js inside the addons: []
• Import the action in your foo.stories.js -> import { action } from '@storybook/addon-actions'
• In the template, have a @click="someMethod" on your component
• Add a methods: {} object like so: methods: { someMethod: action('clicked') }

Example

import { action } from '@storybook/addon-actions'

import HelloWorld from './hello-world'

export default {
  title: 'Atoms / Hello World',
}

export const Default = () => ({
  components: { HelloWorld },
  template:
    '<hello-world @click="action"></hello-world>',
  methods: { action: action('clicked') }
})

[putskan]

Thanks for the quick reply!
Is there a good way to use that approach to handle mutiple event types, without duplicate code?

For example, handling @ click, @ mouseover together:

import { action } from "@storybook/addon-actions"
import InfoCard from "../components/InfoCard.vue"

export default {
  title: "InfoCard",
  component: InfoCard,
}

const Template = args => ({
  components: { InfoCard },
  methods: { action },
  data: () => ({ args }),
  template: `
    <info-card 
    @click="action('click')()" 
    @mouseover="action('mouseover')()"
    v-bind="args" />
    `,
})

[lostdesign]

I don't quite understand the issue?

[anhance]

It works, but number of actions didn't show up, unfortunately. Maybe that's an issue with vue 2?

[benjamin-richardson-circular]

@anhance one thing that tripped me up was that the action() is a factory, where it just returns another function that you need to call. I am also using Vue 2 for this.

To make this a little more neat, I defined my action functions at the top, then call them in the code.

export default {
  title: "InfoCard",
  component: InfoCard,
}

const clickAction = action('click');
const mouseoverAction = actions('mouseover');

const Template = args => ({
  components: { InfoCard },
  methods: { action },
  data: () => ({ args }),
  template: `
    <info-card 
    @click="clickAction()" 
    @mouseover="mouseoverAction()"
    v-bind="args" />
    `,
})

[yandongxu]

• Install and add '@storybook/addon-actions', to your main.js inside the addons: []
• Import the action in your foo.stories.js -> import { action } from '@storybook/addon-actions'
• In the template, have a @click="someMethod" on your component
• Add a methods: {} object like so: methods: { someMethod: action('clicked') }

Example

import { action } from '@storybook/addon-actions'

import HelloWorld from './hello-world'

export default {
  title: 'Atoms / Hello World',
}

export const Default = () => ({
  components: { HelloWorld },
  template:
    '<hello-world @click="action"></hello-world>',
  methods: { action: action('clicked') }
})

try this:

import HelloWorld from './hello-world'

export default {
  title: 'Atoms / Hello World',
  // Add `argTypes` config
  argTypes: {
    click: {
      action: 'click',
    },
  },
}

export const Default = (_, { argTypes }) => ({
  components: { HelloWorld },
  props: Object.keys(argTypes),
  // Magic!
  template: '<hello-world v-bind="$props" @click="click"></hello-world>',
})

[tokidoki11]

i tried the things same as written here

https://storybook.js.org/blog/improved-type-safety-in-storybook-7/

but event is not showing in args or argtypes

[eljefedelrodeodeljefe]

Thanks for that hint. Worked for me with Some adaptations also with SB 8. I guess moving the storybook to TS was also helpful.

A note though: based on this the pattern probably should be using fn from @storybook/test

import { fn } from '@storybook/test'
import type { Meta } from '@storybook/vue3'

export default {
  title: 'Example/ChatContainer',
  component: ChatContainer,
  tags: ['autodocs'],
  args: {
    currentThreadId: '1',
    onOnMessagesLoadMoreRequested: fn(() => {}),
    onOnSearchInput: fn(() => {}),
    onOnNewThreadRequested: fn(() => {})
  }
} satisfies Meta<typeof ChatContainer>