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

[erezmus]

Hope this helps anyone that has the same problem. I managed to find a solution with the following

EDIT: updated solutions for stories to pass extra props

preview.ts

import { h } from 'vue';
import StoryWrapper from './StoryWrapper.vue';

const DEFAULT_THEME = 'light';
const DEFAULT_PAGE_PROPS = {
    // default inertia props go here
};

const withWrapper = (storyFn, context) => {
  const themeName = context.globals.theme || DEFAULT_THEME;
  
  const page = { 
    props: { ...DEFAULT_PAGE_PROPS, ...(context.globals.page || {}) }, 
    url: '', // put this otherwise you get an error when inertia tries to do some routing
  };

  const story = storyFn();

  return () => {
    return h(
      StoryWrapper,
      { themeName, page },
      {
        story: () => h(story, { ...context.args }),
      }
    );
  };
};

export const decorators = [withWrapper];

StoryWrapper.vue

<template>
  <div id="inertia" />
  <v-app :theme="themeName">
    <v-main>
      <slot v-if="isReady" name="story" />
    </v-main>
  </v-app>
</template>

<script setup lang="ts">
import { createApp, h, onMounted, ref } from 'vue';
import { createInertiaApp } from '@inertiajs/vue3';

export interface Props {
  themeName: string; // optional
  page: Record<string, unknown>; // initial props needed for inertia
}

const { themeName, page } = defineProps<Props>();

const isReady = ref(false);

onMounted(() => createInertiaApp({
  id: 'inertia',
  page,
  resolve: () => ({ render: () => h('div') }),
  setup: ({ App, props, el }) => {
    createApp({ render: () => h(App, props) }).mount(el); // this will call the InertiaApp setup method which initialises the page reactive for usePage
    isReady.value = true; // this is needed so that any story that needs usePage doesn't error
  }
}));
</script>

Example.stories.ts

//... imports etc...

// customise the props for inertia
export const Example: Story = {
  globals: {
    page: {
      foo: {
        bar: 'baz'
      }
    }
  }
}