A Storybook decorator that allows you to use Vue 3 / vue-router@4 routing-aware components.
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.
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.
