Storybook in a Laravel + Inertia (Vue 3) app: building a modal + interaction tests
laravel•Jan 5, 2026

Storybook in a Laravel + Inertia (Vue 3) app: building a modal + interaction tests

Adding Storybook to your Laravel + Inertia app gives you a dedicated workshop to build, preview, document, and test UI components in isolation, while Laravel stays focused on the backend.

devTo

devTo

Original source

Key summary

This article discusses how to set up Storybook in a Laravel + Inertia (Vue 3) application to improve UI component development, testing, and documentation. It provides a clean setup structure and a concrete example of a light-themed modal with per-component CSS and interaction testing.

TL;DR

  • Set up Storybook in a Laravel + Inertia app to improve UI component development and testing.
  • Use a clean setup structure with components, CSS, and stories in a single directory.
  • Configure Storybook to load stories from the designated directory.
  • Use the play function to test UI behavior with helpers like canvas and userEvent.
  • Use expect from the storybook/test module for interaction testing.
  • Avoid auto-importing the wrong watch function and rename it to vueWatch instead.
  • Use screen queries for global queries and interaction testing helpers.

This content is automatically summarized using AI. For full context, always refer to the original article.

Related posts

Subscribe For New Content Updates

By becoming a member of our blog, you have access to articles and content.