import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VeeValidate from 'vee-validate'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(VueI18n)
Vue.use(VeeValidate)
Vue.use(Vuetify)

もし、本体のアプリ側でVue.useでオプションを指定しているのであれば、あわせておくと良いでしょう。

次に、このファイルを読み込む設定をstyleguide.config.jsにします。

styleguide.config.js

const path = require('path');

module.exports = {
  require: [path.join(__dirname, 'styleguide/global.requires.js')], // 作成したjsファイルを指定
  // 他の設定は省略
}

これで、VueStyleguideがvuetifyを読み込んでくれます。

loaderの設定

第1回で説明した通り、Vue Styleguidistではloaderのデフォルト設定がされていないので、ファイルの種類毎にloaderを指定してあげないといけないです。

先程の例だとvuetify.min.cssを読み込んでいるので、css用のloaderを指定する必要があります。これを指定しないと、

Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

なにそれわかんないよ😇的な事言われます。

const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  webpackConfig: {
    module: {
      rules: [
        // Vue loader
        {
          test: /\.vue$/,
          exclude: /node_modules/,
          loader: 'vue-loader'
        },
        // css loader
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
      ]
    },
    plugins: [
      // add vue-loader plugin
      new VueLoaderPlugin()
    ]
  },
}

私の設定

styleguide.global.requires.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VeeValidate from 'vee-validate'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import '@mdi/font/css/materialdesignicons.css'

Vue.use(VueI18n)
Vue.use(VeeValidate)
Vue.use(Vuetify)

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

module.exports = {
  webpackConfig: {
    module: {
      rules: [
        // Vue loader
        {
          test: /\.vue$/,
          exclude: /node_modules/,
          loader: 'vue-loader'
        },
        // Other loaders that are needed for your components
        {
          test: /\.css$/,
          loader: 'style-loader!css-loader'
        },
        {
          test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
          use: [
            {
              loader: 'file-loader',
              options: {
                name: '[name].[ext]',
                outputPath: 'fonts/'
              }
            }
          ]
        }
      ]
    },
    plugins: [
      // add vue-loader plugin
      new VueLoaderPlugin()
    ]
  },
  require: [path.join(__dirname, 'styleguide.global.requires.js')],
}

フォントファイル読み込むのにfile-loaderの設定も必要だったので追加しました。

exampleの書き方tips

公式exampleのようなシンプルなcomponentであれば問題ないのですが、v-menuを使うと変なところに表示される挙動になりました。

consoleには

 [Vuetify] Unable to locate target [data-app]

というwarningが表示されます。

対応としては、

<template>
    <v-app
        style="height: 20vh;"
    >
      <v-container >
        <v-layout
          row
          wrap
        >
          <v-flex xs12>
            <SomeComponent/>
          </v-flex>
        </v-layout>
      </v-container>
    </v-app>
</template>