this.$route.nameをStorybookで使えるようにする方法

背景

Nuxt.jsのthis.$route.nameを使ってページによって異なる処理を行うコンポーネントを作りました。

<template>
  <!-- 中略 -->
</template>

<script>
export default {
  name: 'Component',
  computed: {
    isHoge: function() {
      return this.$route.name === 'hoge'
    }
  }
}
</script>

import { storiesOf } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import StoryRouter from 'storybook-vue-router'

import Component from './Component.vue'

storiesOf('Components', module)
  .add('Component', () => ({
    components: { Component },
    template: '<component />'
  }))

これをStorybookで表示＆動作確認したかったのですが、

Cannot read property 'name' of undefined

となって表示できませんでした。
解決法を調べましたので備忘録として残します。

解決法

https://github.com/gvaldambrini/storybook-router を使うことにしました。
Nuxt.jsなので https://github.com/gvaldambrini/storybook-router/tree/master/packages/vue に倣いインストールします。

npm install --save-dev storybook-vue-router

import { storiesOf } from '@storybook/vue'
import { action } from '@storybook/addon-actions'
import StoryRouter from 'storybook-vue-router'

import Component from './Component.vue'

storiesOf('Components', module)
  .addDecorator(StoryRouter({}, { initialEntry: { name: 'hoge' } })) //<--追記
  .add('Component', () => ({
    components: { Component },
    template: '<component />'
  }))

これで期待通り動きました。