もやぶろ

moyashidaisukeのブログだからもやぶろ。フリーランスのエンジニアのダイスケです。プログラム関連とかギター関連とか旅行関連とか色々。

【vue】Vue Styleguidistの使い方を説明③ 〜Vuetify動かす〜

f:id:moyashidaisuke:20191004235126p:plain

概要

Vue Styleguidistで、vue用のコンポーネントライブラリのvuetifyを使う設定をいれてきます。

前回までの

www.moyashidaisuke.com

www.moyashidaisuke.com

公式

exampleが提供されています。

vue-styleguidist.github.io

github.com

が、解説が全体的に足りないので、参考程度です😇

解説

外部ライブラリの読み込み設定

vue-styleguidist.github.io

任意の外部ライブラリを読み込ませる設定で、Vuetifyを読み込むようにします。

適当なjsファイルを作成します。 cookbookだとstyleguide/global.requires.js、exampleだとconfig/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'

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>

みたいに、vuetifyを使う時のlayoutのベースもセットでいれてあげると解消しました。

また、style="height: 20vh;" もポイントで、これを使いしないとデフォルトの100vhが効いて無駄な余白ができます。

stylesの指定について話したい予定。

vue-styleguidist.github.io