{"library":"storybook-vue3-router","title":"Storybook Vue 3 Router Decorator","type":"library","description":"This package, `storybook-vue3-router`, provides a Storybook decorator specifically designed for Vue 3 components that utilize `vue-router`. It enables developers to wrap their routing-aware components within Storybook stories, allowing for proper testing and display of elements like `<router-view>` and `<router-link>`. The current stable version is 7.0.0, which supports Storybook v10. This library generally releases new major versions to align with new major versions of Storybook, ensuring compatibility. A key differentiator is its ability to easily provision a `vue-router` instance for stories, with options for custom routes, navigation guards, and even a mocked router for simpler use cases, streamlining the process of testing complex routing logic in isolation.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install storybook-vue3-router"],"cli":null},"imports":["import { vueRouter } from 'storybook-vue3-router'","import { vueRouter } from 'storybook-vue3-router'"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/NickMcBurney/storybook-vue3-router","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-vue3-router","openapi_spec":null,"status_page":null,"smithery":null},"quickstart":{"code":"import { h, defineComponent } from 'vue';\nimport { RouterLink, RouterView } from 'vue-router';\nimport { vueRouter } from 'storybook-vue3-router';\nimport type { StoryFn } from '@storybook/vue3';\n\n// A simple component to demonstrate routing functionality\nconst MyRouterComponent = defineComponent({\n  template: `\n    <div>\n      <h1>Current Route: {{$route.path}}</h1>\n      <nav>\n        <RouterLink to=\"/\">Home</RouterLink> |\n        <RouterLink to=\"/about\">About</RouterLink> |\n        <RouterLink to=\"/admin\">Admin</RouterLink>\n      </nav>\n      <hr/>\n      <RouterView />\n    </div>\n  `,\n  components: { RouterLink, RouterView }\n});\n\n// Dummy components for custom routes\nconst HomeComponent = defineComponent({ template: '<div>Home Page Content</div>' });\nconst AboutComponent = defineComponent({ template: '<div>About Page Content</div>' });\nconst AdminComponent = defineComponent({ template: '<div>Admin Page Content (simulated)</div>' });\n\n// Define custom routes for the Storybook decorator\nconst customRoutes = [\n  { path: '/', name: 'home', component: HomeComponent },\n  { path: '/about', name: 'about', component: AboutComponent },\n  { path: '/admin', name: 'admin', component: AdminComponent }\n];\n\nconst Template: StoryFn = (args) => ({\n  components: { MyRouterComponent },\n  setup() { return { args }; },\n  template: '<MyRouterComponent />',\n});\n\nexport const Default = Template.bind({});\nDefault.decorators = [\n  // Apply the vueRouter decorator with custom routes\n  vueRouter(customRoutes, { initialRoute: '/about' })\n];\n\nDefault.parameters = {\n  // Optional: You can also specify the initial route via parameters\n  // vueRouter: {\n  //   route: '/about'\n  // }\n};\n","lang":"typescript","description":"This quickstart demonstrates how to apply the `vueRouter` decorator to a Storybook story for a Vue 3 component. It sets up a basic `vue-router` instance with custom routes, allowing interactive routing within Storybook stories. An initial route is also configured.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}