Vue.jsでVue Materialを使う方法

Vue Materialの公式ページに使い方は載ってるけど、初心者の自分にはよく分からなかったのでメモ。
（vue-cliでプロジェクト作成してます）

Vue Materialのインストール

まずは、Vue Materialをプロジェクトにインストール。

cd <Vueプロジェクト>
yarn add vue-material

パッケージマネージャにnpmを使用している場合は、

cd <Vueプロジェクト>
npm install vue-material --save

RobotフォントとGoogleアイコンのダウンロード設定追加

これは任意でやれば良いとのことですが、可能な限りやった方が良いとのことなので一応やっておきました。

public/index.htmlのHeadタグ内に以下を追加。

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">

Vue Materialコンポーネントの読み込み

Vue Materialコンポーネントを使うためにmain.jsに以下を追加します。
例）<md-button>、<md-content>、<md-tabs>を使いたいケース

import Vue from 'vue'
import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(MdButton)
Vue.use(MdContent)
Vue.use(MdTabs)

基本的にVue.jsでは、コンポーネントはパスカルケースで定義されているので、Vue Materialのコンポーネントもパスカルケースで作成されています。
※node_module内を覗いてみると分かります。

このように使いたいものを都度インポートしてVueで使用するようすればOK。
Vue Material用のcssもちゃんとインポートしてあげないと上手く表示されないので注意。

補足

推奨されていませんが、使いたいものだけを都度インポートするのが手間という場合に全部入りのようなやり方もあります。

import Vue from 'vue'
import VueMaterial from 'vue-material'
import 'vue-material/dist/vue-material.min.css'
import 'vue-material/dist/theme/default.css'

Vue.use(VueMaterial)

こうすることで、すべてのコンポーネントが使えるようになります。
全部読み込むのは効率が悪いという理由で非推奨だと思いますが、個人開発とかだと特に気にせず使って良いと思います。

コメント