Storybook Nuxt + Vuetifyのリンクの対応

nuxt-linkやVuetifyの[to]でのリンク（router-link）はstorybook上でリンクが動くとおかしなことになるのでエラーが出る仕様になっていて、エラーが出るの嫌だし、出力でどこにリンクするのかが欲しいというのが課題でした。

私は、Nuxt初心者だけどNuxt, Vuetify, Storybook, TSで環境構築しましたが色々本当に大変でやっと整ってきました。

いろんな記事に本当に助けられました。
色々ありますが、今回はリンク対応だけ載せておきます。

import Vue from 'vue'
import { action } from '@storybook/addon-actions'
Vue.component('nuxt-link', {
  props: ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    }
  },
  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>'
})

Vue.component('router-link', {
  props: ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    }
  },
  template: '<a href="#" @click.prevent="log()"><slot>RouterLink</slot></a>'
})

ファイルの全体

import { configure, addDecorator } from '@storybook/vue'
import { withKnobs } from '@storybook/addon-knobs'
import { setConsoleOptions } from '@storybook/addon-console'
import { withInfo } from 'storybook-addon-vue-info'
import { action } from '@storybook/addon-actions'

// 追加
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css' // →これ重要

Vue.component('nuxt-link', {
  props: ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    }
  },
  template: '<a href="#" @click.prevent="log()"><slot>NuxtLink</slot></a>'
})

Vue.component('router-link', {
  props: ['to'],
  methods: {
    log() {
      action('link target')(this.to)
    }
  },
  template: '<a href="#" @click.prevent="log()"><slot>RouterLink</slot></a>'
})

// 依存注入
Vue.use(Vuetify)

addDecorator(() => ({
  vuetify: new Vuetify(),
  template: `
<v-app>
    <story/>
</v-app>
`
}))

setConsoleOptions({
  panelExclude: []
})

addDecorator(withKnobs)

addDecorator(withInfo)

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module)

nuxtにstorybook入れるとこけるcore-js

core-jsというライブラリのバージョン3以上が入っているとエラーでこけます。
とりあえず以下のバージョンに下げることで動きます。

package.json

"core-js": "2.6.2",

参考

• nuxt-link タグのリンクをStorybook上で確認する方法