Security News
Cloudflare Adds Security.txt Setup Wizard
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
storybook-vue3-router
Advanced tools
A Storybook decorator that allows you to build stories for your routing-aware components.
A Storybook decorator that allows you to use your Vue 3 routing-aware components.
If you want to build stories for Vue 3 components using <router-view>
or <router-link>
then you need to wrap your stories with vue-router
this addon will allow for you to easily do this.
This decorator works with Storybook's Component Story Format (CSF) and hoisted CSF annotations, which is the recommended way to write stories since Storybook 6. It has not been tested with the storiesOf API.
npm install --save-dev storybook-vue3-router
// or
yarn add --dev storybook-vue3-router
The default setup will create a vue-router
instance, with 2 routes (/
and /about
) - these can be reviewed in the defaultRoutes.ts file.
/* import storybook-vue3-router */
import vueRouter from 'storybook-vue3-router'
/* ...story setup... */
/* your story export */
export const Default = Template.bind({})
/* adding storybook-vue3-router decorator */
Default.decorators = [
/* this is the basic setup with no params passed to the decorator */
vueRouter()
]
You can see the examples stories published on this demo.
This decorator comes with optioal params for customising the implementation of your vue-router
within Storybook.
/* define our custom routes */
const customRoutes = [
{
path: '/',
name: 'home',
component: HomeComponent // this would need to be defined/imported into the `.stories` file
},
{
path: '/about',
name: 'about',
component: AboutComponent // this would need to be defined/imported into the `.stories` file
}
]
/* adding storybook-vue3-router decorator */
Default.decorators = [
/* pass custom routes to the decorator */
vueRouter(customRoutes)
]
/* define our custom routes */
const customRoutes = [
// ...
{
path: '/admin',
name: 'admin',
component: AdminComponent,
/* add per-route navigation guard */
beforeEnter: (to, from, next) => {
// ...
}
}
]
/* adding storybook-vue3-router decorator */
Default.decorators = [
/* pass custom routes to the decorator */
vueRouter(customRoutes)
]
By default the decorator will default the starting route to /
, if you want to change this you can pass as a parametor to the decorator
/* define our custom routes */
const customRoutes = [
{
path: '/',
name: 'dashboard',
component: Dashboard
},
{
path: '/intro',
name: 'intro',
component: Intro
}
]
/* adding storybook-vue3-router decorator */
Default.decorators = [
/* pass initialRoute to the decorator */
vueRouter(customRoutes, {
initialRoute: '/intro'
})
]
See the examples folder for more advanced usage.
function vueRouter(routes: RouteRecordRaw[], options?: { initialRoute?: string })
The migration from v1 brings some breaking changes:
// v1.x - 2nd param is used to pass `beforeEach` router guard
// in this example the guard is used to fire a storybook action with `to` and `from` router objects
vueRouter(customRoutes, (to, from) => action('ROUTE CHANGED')({ to: to, from: from })) // LEGACY
// v2.x - 2nd param is used to pass additional options to the decorator
vueRouter(customRoutes, { initialRoute?: string })
If you were previously using v1 with router guards in the second parameter, these will need to be refactored to use the route specific router guards.
Why was beforeEach
router guard removed from options?
After resolving this issue, to enable multiple stories to be created using different route setups, it was noticed that this caused the beforeEach
function to be added on every route. For example every time you click a different story the new beforeEach
hook is added - but previous ones are not removed, this results in multiple guards firing on stories unrelated to the 'active' story.
v2.0.2 (Sat Nov 20 2021)
main
FAQs
A Storybook decorator that allows you to build stories for your routing-aware components.
The npm package storybook-vue3-router receives a total of 38,733 weekly downloads. As such, storybook-vue3-router popularity was classified as popular.
We found that storybook-vue3-router demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.
Security News
ENISA’s 2024 report highlights the EU’s top cybersecurity threats, including rising DDoS attacks, ransomware, supply chain vulnerabilities, and weaponized AI.