Hey there, just wanted to share my experience with storybook - I'm really enjoying it so far!
Currently, I'm facing a challenge while implementing it in my Laravel app with Inertia. I'm trying to render a navigation link component that makes use of the Inertia links wrapper:
The component is registered in storybook, but it's not rendering properly because of how the inertia-link replaces the HTML in the code. I'm wondering if there's a way to import the inertia link into storybook to make rendering possible?
When I manually change the tag in the HTML via inspection to an anchor tag (), the component renders correctly. This indicates that the issue lies with the inertia-link, which has been quite frustrating for me.
I've spent some time on this issue and even tried searching for solutions, but unfortunately haven't found an answer yet :(
I'll definitely keep you posted if I come across any new discoveries.
Edit: After further investigation, I noticed an error message in the console which reinforces my belief that the problem lies with the inertia-link component:
[Vue warn]: Failed to resolve component: Link
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
at <AppNavLink href="/" >
The code of the Vue component:
<Link
class="font-medium uppercase hover:text-blue-600 dark:hover:text-blue-400"
:class="{
' text-blue-500 hover:text-blue-500 dark:hover:text-blue-500': active,
}"
>
<slot />
</Link>
</template>
<script>
export default {
props: {
active: Boolean,
},
}
</script>
The story:
import NavLink from '../resources/js/components/ui/AppNavLink.vue'
import { Link } from '@inertiajs/inertia-vue3'
//👇 This default export determines where your story goes in the story list
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
* to learn how to generate automatic titles
*/
title: 'Design System/Navbar link',
component: NavLink,
subcomponents: { Link },
}
//👇 We create a “template” of how args map to rendering
const Template = (args) => ({
components: { NavLink, Link },
setup() {
//👇 The args will now be passed down to the template
return { args }
},
template: ' <NavLink href=args.href > Posts </NavLink>',
})
export const Default = Template.bind({})
Default.args = {
/* 👇 The args you need here will depend on your component */
href: '/',
}