2019年6月21日
2020年11月2日
`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

フォローお願いします