{"id":14059,"library":"storybook-vue3-router","title":"Storybook Vue 3 Router Decorator","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.","status":"active","version":"7.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/NickMcBurney/storybook-vue3-router","tags":["javascript","storybook-addons","vue","vue-router","typescript"],"install":[{"cmd":"npm install storybook-vue3-router","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-vue3-router","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-vue3-router","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core Storybook framework adapter, required peer dependency.","package":"@storybook/vue3","optional":false},{"reason":"Core Vue framework, required peer dependency.","package":"vue","optional":false},{"reason":"Core Vue routing library, required peer dependency.","package":"vue-router","optional":false}],"imports":[{"note":"This library is primarily designed for ESM environments. Using CommonJS `require` will likely lead to module resolution errors in most modern Storybook setups.","wrong":"const vueRouter = require('storybook-vue3-router')","symbol":"vueRouter","correct":"import { vueRouter } from 'storybook-vue3-router'"},{"note":"The `vueRouter` function is a named export, not the default export. Importing it incorrectly as a default will result in `undefined`.","wrong":"import vueRouter from 'storybook-vue3-router'","symbol":"vueRouter","correct":"import { vueRouter } from 'storybook-vue3-router'"}],"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."},"warnings":[{"fix":"Ensure your project is running Storybook v10 (e.g., `@storybook/vue3@10.x`) before upgrading to `storybook-vue3-router@7.x`.","message":"Version 7.x of `storybook-vue3-router` introduces breaking changes by upgrading to support Storybook v10. Previous versions are not compatible.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"For Storybook v8, use `storybook-vue3-router@5.1.x`. For Storybook v7, use `storybook-vue3-router@3.x`.","message":"Version 5.x of `storybook-vue3-router` introduces breaking changes for compatibility with Storybook v8. Projects using older Storybook versions should not upgrade to `5.x`.","severity":"breaking","affected_versions":">=5.0.0 <7.0.0"},{"fix":"For Storybook v7, use `storybook-vue3-router@3.x`. For Storybook v6, stick to `storybook-vue3-router@2.x`.","message":"Version 3.x of `storybook-vue3-router` introduced breaking changes to support Storybook v7. Older Storybook v6 projects should continue using `2.x`.","severity":"breaking","affected_versions":">=3.0.0 <5.0.0"},{"fix":"Migrate your stories to Component Story Format (CSF) if you are currently using the `storiesOf` API to ensure compatibility and leverage the full features of this decorator.","message":"This decorator is designed to work with Storybook's Component Story Format (CSF) and hoisted CSF annotations. It has not been tested and is not recommended for use with the older `storiesOf` API.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'3':3,20 '7.0.0':55 'abil':82 'addon':122 'align':68 'allow':40 'awar':35 'case':108 'compat':76 'complex':114 'compon':21,36 'current':51 'custom':96 'decor':5,15 'design':17 'develop':29 'differenti':79 'display':45 'easili':84 'element':47 'enabl':28 'ensur':75 'even':101 'general':62 'guard':99 'instanc':90 'isol':118 'javascript':119 'key':78 'librari':61 'like':48 'logic':116 'major':65,71 'mock':103 'navig':98 'new':64,70 'option':94 'packag':7 'process':111 'proper':42 'provid':12 'provis':85 'releas':63 'rout':34,97,115 'router':4,11,26,89,104,126 'routing-awar':33 'simpler':106 'specif':16 'stabl':52 'stori':39,92 'storybook':1,9,14,38,58,74,121 'storybook-addon':120 'storybook-vue3-router':8 'streamlin':109 'support':57 'test':43,113 'typescript':127 'use':107 'util':23 'v10':59 'version':53,66,72 'vue':2,19,25,88,123,125 'vue-rout':24,87,124 'vue3':10 'within':37 'wrap':31","created_at":"2026-04-20T01:57:43.517311+00:00","updated_at":"2026-04-20T01:57:43.517311+00:00","problems":[{"fix":"Run `npm install --save-dev storybook-vue3-router` or `yarn add --dev storybook-vue3-router`. Double-check the import statement `import { vueRouter } from 'storybook-vue3-router'`.","cause":"The package is not installed or the import path is incorrect.","error":"Module not found: Can't resolve 'storybook-vue3-router'"},{"fix":"Ensure you are using `import { vueRouter } from 'storybook-vue3-router'` for named import. Avoid `import vueRouter from 'storybook-vue3-router'` or `const vueRouter = require('storybook-vue3-router')`.","cause":"The `vueRouter` function was imported incorrectly, often as a default import instead of a named import, or via `require` in an ESM context.","error":"TypeError: (0 , storybook_vue3_router__WEBPACK_IMPORTED_MODULE_0__.vueRouter) is not a function"},{"fix":"Verify that `Default.decorators = [vueRouter()]` (or with custom options) is correctly set on your story. Ensure your component is wrapped by the decorator in the Storybook rendering process.","cause":"Your Vue component is trying to access `$route` or `$router` but the `vueRouter` decorator has not been correctly applied or configured for the story.","error":"Cannot read properties of undefined (reading '$route') or 'TypeError: Cannot read properties of null (reading 'path')'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","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,"categories":["web-framework","testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}