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

フォローお願いします