vue.jsにVue Materialを適用してみた

vue.js

Vue Material(https://vuematerial.github.io/#/)を使用してマテリアルデザインを適用した際のメモ

インストール

公式の手順に従えば簡単に使えるようになる。

https://vuematerial.github.io/#/getting-started

$ npm install vue-material --save
$ yarn add vue-material

vue-materialはyarnでインストールするので、まだ入っていない場合は"npm install -g yarn"でyarnを実行できるようにしておく。

インストールできたらmain.jsなど最初の方で読み込まれるjs内で以下を実行してVue Materialのコンポーネントを使えるようにしておく。

import VueMaterial from 'vue-material'
Vue.use(VueMaterial)

ただこれだけだとコンポーネントに対してcssが適用されないので、以下を追記してnode_module内のcssを読み込ませておく。

require('vue-material/dist/vue-material.css')

または

import 'vue-material/dist/vue-material.css'

使ってみる

Vue Materialを使う準備はできたので実際に使ってみる。試しに以下のようなコンポーネントを準備した。

<template>
  <div id="header">
    <md-toolbar>
      <h1 class="md-title">アプリケーションタイトル</h1>
      <md-button class="md-raised" v-on:click="greet(event)">実行</md-button>
    </md-toolbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
    }
  },
  methods: {
    greet: function (event) {
      alert('Hello !')
    }
  }
}
</script>

<style scoped>
.md-raised {
      margin-left: 30px;
}
</style>

実行してみるとマテリアルデザインが適用されたボタンが表示されたはずである。ボタンを押したらgreetメソッドが実行されると思ったのだが反応がなかった。 これについては公式にドキュメント(https://jp.vuejs.org/v2/guide/components.html)がありまして、どうやらカスタムコンポーネントのルート要素 にネイティブイベントをバインディングする場合.nativeを追記する必要があるようです。 それを踏まえて以下の修正を加えるとボタンクリックでメソッドが実行できることを確認できました。

<md-button class="md-raised" v-on:click="greet(event)">実行</md-button>
 ↓
<md-button class="md-raised" v-on:click.native="greet(event)">実行</md-button>