storybook-vue3-router

import { h, defineComponent } from 'vue'; import { RouterLink, RouterView } from 'vue-router'; import { vueRouter } from 'storybook-vue3-router'; import type { StoryFn } from '@storybook/vue3'; // A simple component to demonstrate routing functionality const MyRouterComponent = defineComponent({ template: ` <div> <h1>Current Route: {{$route.path}}</h1> <nav> <RouterLink to="/">Home</RouterLink> | <RouterLink to="/about">About</RouterLink> | <RouterLink to="/admin">Admin</RouterLink> </nav> <hr/> <RouterView /> </div> `, components: { RouterLink, RouterView } }); // Dummy components for custom routes const HomeComponent = defineComponent({ template: '<div>Home Page Content</div>' }); const AboutComponent = defineComponent({ template: '<div>About Page Content</div>' }); const AdminComponent = defineComponent({ template: '<div>Admin Page Content (simulated)</div>' }); // Define custom routes for the Storybook decorator const customRoutes = [ { path: '/', name: 'home', component: HomeComponent }, { path: '/about', name: 'about', component: AboutComponent }, { path: '/admin', name: 'admin', component: AdminComponent } ]; const Template: StoryFn = (args) => ({ components: { MyRouterComponent }, setup() { return { args }; }, template: '<MyRouterComponent />', }); export const Default = Template.bind({}); Default.decorators = [ // Apply the vueRouter decorator with custom routes vueRouter(customRoutes, { initialRoute: '/about' }) ]; Default.parameters = { // Optional: You can also specify the initial route via parameters // vueRouter: { // route: '/about' // } };