Zenn
🐳

VuetifyをStorybookで動かすための設定

2024/12/31に公開
Storybook
Vue.js
Vuetify
tech

vue-cliを使ってサクッとお試しで触ろうと思ったのにハマってしまったのでまとめておきます。

環境はvue-cli uiを使ってインストールしました。

環境

CLI Or CLI-PLUGIN インストールされたライブラリ バージョン
vue-cli(3.4.0) vue 2.6.2
vue-cli-plugin-storybook(0.5.1) @storybook/vue 4.1.11
vue-cli-plugin-vuetify(0.4.6) vuetify 1.5.0

設定

config/storybook/config.js
// 以下のコードを追加する
import Vue from 'vue';
// webpackで読み込めるように、ビルドされたmin.jsとmin.cssを読み込む
import Vuetify from 'vuetify/dist/vuetify.min';
import 'vuetify/dist/vuetify.min.css';

// Themeの設定を行っている場合は同様の設定を行う。
Vue.use(Vuetify, {
  iconfont: 'md',
});
config/storybook/config.js
<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
</head>

補足

vue-cli-plugin-vuetifyを使ってインストールすると、下記のようなsrc/plugins/vuetify.tsが作成される

vuetify.ts
import Vue from 'vue';
import Vuetify from 'vuetify/lib';
import 'vuetify/src/stylus/app.styl';

Vue.use(Vuetify, {
  iconfont: 'md',
});

TypeScriptプロジェクトの場合、storybookのwebpackでビルドできないので、Vuetifyが使用できない。ビルド後のjs, cssを読み込むことで回避可能。

最後に

storybookの4系だとwebpackのデフォルトを上書きしたいのに、webpack.configがどこにあるかわからない...:cry:

Discussion