Storybook vue composition api, _router of undefined

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?

10 thoughts on “Storybook vue composition api, _router of undefined”

  1. 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
      }
    )
    
    Reply

Leave a Comment