How to update args after button click? Storybook 8, Vue 3, Vite

[pellexa]

Summary

Hi everyone.

Please tell me how to update args after clicking on a button using the modal window as an example.

Additional information

I use Vue 3, Vite, Storybook 8.3.4 with default configs.
Link to code.

I want the show property to change to true at the bottom of controls -> props when I click the "Open modal" button.

There are examples of using useArgs hook on the Internet, but I didn't understand how to implement it in Storybook version 8. I get error:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
  at useContext (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-USEVLOEB.js?v=6c0c285e:1062:29))
  at useStorybookApi (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_manager-api.js?v=6c0c285e:10448:49))
  at useArgs (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/@storybook_manager-api.js?v=6c0c285e:10521:75))
  at setup (/src/stories/Modal.stories.ts?t=1727872238367:12:31))
  at callWithErrorHandling (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-AE3KO74O.js?v=6c0c285e:2565:19))
  at setupStatefulComponent (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-AE3KO74O.js?v=6c0c285e:10226:25))
  at setupComponent (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-AE3KO74O.js?v=6c0c285e:10187:36))
  at mountComponent (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-AE3KO74O.js?v=6c0c285e:7548:7))
  at processComponent (/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/chunk-AE3KO74O.js?v=6c0c285e:7514:9))

Error code piece:

import { useArgs } from '@storybook/manager-api';
import Modal from './Modal.vue';

const meta = {
  title: 'Example/Modal',
  component: Modal,
  render: args => ({
    components: {
      Modal,
    },
    setup() {
      const [_, updateArgs] = useArgs();            // error occurs here

      const clickHandler = () => {
        updateArgs({ show: true });
      };
      const closeHandler = () => {
        updateArgs({ show: false });
      };

      return { args, clickHandler, closeHandler };
    },
    template: `
      <button @click="clickHandler">Open modal</button>
      <Modal :=args @close="closeHandler">
        <template #default>
          {{ args.default}}
        </template>
      </Modal>
    `,
  }),

 ...

Thank you in advance for your help.

Create a reproduction

Link to code.

[lucaplus]

Hi,
I was not able to use useArgs, I got your same error.

This link helped me find a solution:
https://craigbaldwin.com/blog/updating-args-storybook-vue/

The workaround was to make it available through a decorator. I was using Storybook 8.4.7.

In preview.ts you add a decorator:

import { useArgs } from '@storybook/client-api'

export const decorators = [
  (story, context) => {
    const [_, updateArgs] = useArgs()
    return story({ ...context, updateArgs })
  },
]

Then in your render function or Template of your Story you can access the updateArgs function to update the args of the Story so they are reflected in the controls panel of Storybook:

export const metaVue: MetaVue<typeof Table> = {
//  -----------------👇 you get it from here
  render: (args, {updateArgs}) => ({
    components: { Table },
    setup() {
    // 👉 and here you can call updateArgs
    }
  })
}

[pellexa]

Thanks for your Help!

[pellexa]

Here is the final result.

preview.ts:

import { useArgs } from '@storybook/preview-api';

const preview: Preview = {
  ...

  decorators: [
    (story, context) => {
      const [_, updateArgs] = useArgs();
      return story({ ...context, updateArgs });
    },
  ],
};

Modal.stories.ts:

const meta = {
  title: 'Example/Modal'
  component: Modal,
  render: (args, { updateArgs }) => ({
    components: {
      Modal,
    },
    setup() { 
      const clickHandler = () => {
        updateArgs({ ...args, show: true });
      };
      const closeHandler = () => {
        updateArgs({ ...args, show: false });
      };
  
      return { args, clickHandler, closeHandler };
    },
    template: `
      <button @click="clickHandler">Modal open</button>
      <Modal :=args @close="closeHandler">
        <template #default>
          {{ args.default}}
        </template>
      </Modal>
    `,
  }),
  ...
} satisfies Meta<typeof Modal>;