How to pass props to usePage function from Storybook ?

[wadakatu]

Version

@inertiajs/[email protected]

@inertiajs/[email protected]

Hi.
I am trying to create the story of a component which uses usePage function to retrieve a value called menu.

This is how I use usePage function to retrieve values in vue component.

 setup() {
    const { menu } = usePage().props.value;

    return {
      menu
    };
  }

My story looks like this.

import HeaderMenu from '@/components/HeaderMenu.vue';
import { Meta, StoryFn } from '@storybook/vue3';

export default {
  title: 'User/Components/HeaderMenu',
  component: HeaderMenu,
  argTypes: {},
} as Meta<typeof HeaderMenu>;

const Template: StoryFn<typeof HeaderMenu> = (args) => ({
  components: { HeaderMenu },
  setup() {
    return { args };
  },
  template: '<HeaderMenu v-bind="args" />',
});

export const Default = Template.bind({});

However, the error TypeError: Cannot read properties of undefined (reading 'menu') occurs no matter how I implemented.
Is there anyone who knows how to pass props to usePage function from storybook?

[MineDrum]

The issue is that the usePage() is not available from within storybook, because it is something that is passed to the application when a view is loaded through your backend provider (Laravel maybe?)

I haven't found a good way to mock this yet in storybook though