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

背景

• Storybook上で nuxt-link がリンクとして認識されない
• リンク設定をStorybook上で確認できたら良いな

以上の理由より、Storybook上で Nuxt のタグ nuxt-link がリンクと認識されるようにStorybookの設定を調整しました。

環境

Nuxt: v2.8.1
@storybook/vue: v5.1.8
@storybook/addon-actions: v5.1.8

設定

インストール

まず、 @storybook/addon-actions をインストールします。

npm i -D @storybook/addon-actions

Storybook 設定

次に、.storybook ディレクトリにある addons.js ファイルに1行書き加えます。

// /.storybook/addons.jsに1行追記
import '@storybook/addon-actions/register'

最後に、config.jsに import { action } from '@storybook/addon-actions を加えて nuxt-link コンポーネントをVueに登録します。

// /.storybook/config.js
import Vue from 'vue'

import { configure } from '@storybook/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>',
})

const req = require.context('../src/stories', true, /\.stories\.js$/);
function loadStories() {
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

以上で設定終了です。

これでStorybook上で、すべてのnuxt-linkインスタンスがアンカー要素に置き換えられ、クリック可能なリンクが表示されるようになりました。
クリックするとActionsパネルにリンク情報が出力されます。

参考したページ

An (almost) comprehensive guide on using Storybook with Nuxt.js