Storybook vue composition api, _router of undefined

Question

I tried to render a component with storybook (vue-cli conf) using the vue-composition-api but I get the following error :

Error: Cannot read property '_router' of undefined

Code of file.stories.ts is given below,

import Vue from 'vue'
import CompositionApi from '@vue/composition-api'
import VueRouter from 'vue-router'

import { storiesOf } from '@storybook/vue'
import Login from '@/ui/views/Login/Login.vue'
import StoryRouter from 'storybook-vue-router'

Vue.use(CompositionApi)
Vue.use(VueRouter)

storiesOf('Components', module)
  .addDecorator(StoryRouter())
  .add('Login', () => ({
    components: { Login },
    template: '<Login/>',
  }))

and Code of file.vue is given below

<template>
... 
</template>

export default defineComponent({
  name: 'Login',
  setup(props, { root: { $router } }) {

    function redirectTo() {
       $router.push({ name: 'Home' })
    }

    return {
       redirectTo,
    }

  },
})

If I write setup(props, { root }) and then root.$router(...) it works, but I would like to keep destructuring my setup function. Any suggestion how I could do that?

Aito Hideki Aito Hideki · Accepted Answer · 2021-02-16T03:41:15

In storybook, router, vuetify.. all the plugins setup on Vue app are belonging to parent of the component. So you should bind them to component itself.

You can extend a component like this

const extendedComponent = Vue.component(
  componentName,
  {
    extends: component.default || component,
    router,
    vuetify
  }
)

Storybook vue composition api, _router of undefined

1 Answers