Vue.jsでMDL(material design lite)を使う時の注意

軽くハマってしまったので備忘録。

• vue-material-componentsの記載を追加。(2016.08.27)
• mdl-textfieldのfocusに関する記載を追加。(2016.09.18)

Vue.js用のマテリアルデザインコンポーネント

https://github.com/vuejs/awesome-vue#component-collections
Vue.jsで使えるUIコンポーネントはこちらに一覧があるので、ここから好きなのを選ぶ。

■ vue-mdl

http://posva.net/vue-mdl/#!/installation
vue-mdl というのがあるのでこれを使う。

npm install --save-dev vue-mdl

基本的にインストールガイドに書いてある通りだけど ルートのjsファイル等に

main.js

// es2015の場合
import VueMdl from 'vue-mdl'
Vue.use(VueMdl)

このように記述すればOK。ただしMDL本体は含まれていないので、index.html あたりにMDL本体をインクルードする。
http://www.getmdl.io/started/index.html

index.html

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.1.3/material.min.js"></script>

注意事項

1. ReferenceErrorが出る場合
MDLの GETTING STARTED の通りに記述すると

Uncaught ReferenceError: componentHandler is not defined

のエラーが出てしまうので、scriptタグの中にある defer は削除する。
本件はこちらのissueに記載があった。
https://github.com/posva/vue-mdl/issues/20

2. mdl-textfieldコンポーネントのfocus関連イベント
http://posva.net/vue-mdl/#!/textfields
使用頻度が高いテキストボックスのコンポーネント。
これを使用する場合、v-on:focus/v-on:blur だと、フォーカスイベントが拾えない。レンダリングされたHTMLを見れば分かるが、v-on:focusin v-on:focusout にする必要がある。
↑Chromeでは問題なかったが、Firefoxでは focusin/focusout イベントが拾えなかった。mdl-textfieldコンポーネントの中身を確認したら、名前付きslotが設定されていたので、input要素を自分で書けば良さそう。

sample.vue

<mdl-textfield floating-label="ほげほげ">
  <input class="mdl-textfield__input" type="text"
         slot="input"
         :value="hoge"
         @focus="onFocus"
         @blur="offFocus">
</mdl-textfield>

■ vue-material-components

vue-mdl以外にもmaterial design用のライブラリがあった。こちらは MaterializeCSSベースになっている。
http://appcomponents.org/material-components/#!/

注意事項

ただし、これをそのまま使うと hot reload した時に、以下のようなHMRの警告が表示されてしまう。（Webpack利用の場合）

WARNING in ./~/vue/dist/vue.common.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

WARNING in ./~/Vue/dist/vue.common.js
There is another module with an equal name when case is ignored.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Rename module if multiple modules are expected or use equal casing if one module is expected.

原因はライブラリに含まれる、webpack.config.js のvueの指定が正しく記述されていないせい。

webpack.config.js

    externals: {
        'vue': 'Vue', // <= 本来はすべて小文字で'vue'と書かなければいけない
        'vue-router': 'VueRouter'
    }

自分のプロジェクトの webpack.config あたりに、以下を追記すると一応解決する。

webpack.base.conf.js

  resolve: {
    alias: {
      'Vue': path.join(__dirname, 'node_modules/vue') // vueのパスは自分の環境に置き換えてください
    },
  }

本件はこちらのIssueに記載があった。
https://github.com/appcomponents/material-components/issues/32