When attempting to display a component using storybook (vue-cli conf) with the vue-composition-api, an error is encountered:
Error: Cannot read property '_router' of undefinedThe code from file.stories.ts is as follows:
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/>',
}))
The code from file.vue is provided below
<template>
...
</template>
export default defineComponent({
name: 'Login',
setup(props, { root: { $router } }) {
function redirectTo() {
$router.push({ name: 'Home' })
}
return {
redirectTo,
}
},
})
Changing setup(props, { root }) to setup(props, { root.$router(...) resolves the issue. However, there is a desire to maintain the destructuring in the setup function. Any suggestions on how this can be achieved?