Overview:

The Storybook Vue3 Router is an essential decorator for developers looking to build dynamic stories for Vue 3 components that rely on routing. This addon facilitates the integration of Vue Router into Storybook, making it seamless to work with components that utilize <router-view> and <router-link>. Ideal for both seasoned developers and newcomers, it provides a comprehensive solution for mocking routes and enhancing story setups while maintaining a flexible environment for showcasing component variations.

With the global adoption of Vue 3 and its modular architecture, this decorator simplifies the process of visualizing components that require routing capabilities. It supports a wide range of scenarios, including default and customized route setups, helping users craft compelling and fully functional story environments.

Features:

• Easy Integration: Quickly wrap your Vue 3 stories with router functionality to utilize routing-aware components without hassle.

• Mocked Router Option: For scenarios where full routing isn’t needed, a mocked router allows easy access to $route and $router properties, ideal for basic navigation logic.

• Version Compatibility: Designed to work with Storybook versions 6 to 10, ensuring flexibility and support for various setups.

• Custom Routes: Various parameters allow for detailed customization of your router setup, including routes with guards and initial routes.

• Async Setup Support: Leverage the asyncVueRouter export to ensure your stories wait for the router to be ready before rendering, facilitating complex route requirements.

• Suspense Compatibility: Utilizes Vue 3’s <Suspense> component in preview.js to ensure smooth async operations for router readiness.

• Simplified Mocking: Default setup provides mock $router and $route utilities for straightforward testing of component behavior without full routing overhead.

• Extensive Examples: Comprehensive examples and demos available, showcasing both basic and advanced usage to aid in implementation and best practices.