Vueでマテリアルデザイン

今度はこれにチャレンジしてみよう。
またまた百人一首アプリをこれで動かす。
vuetifyjs.com

既存vueのPWAプロジェクトをvuetify化する

vue-cliのPWAテンプレートから作った既存プロジェクトをvuetify化してみる。

ライブラリインストール

package.jsonにも追加して欲しいのでsaveオプションをつけてみる。

npm install --save vuetify

main.jsの編集

ドキュメントに従い、main.jsを編集する

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.css'

Vue.use(Vuetify)

アイコンの登録など

index.htmlのheadに追記する

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

App.vue を編集

<template>
  <div id="app">
    <header>
      <span>Vue.js PWA</span>
    </header>
    <main>
      <img src="./assets/logo.png" alt="Vue.js PWA">
      <router-view></router-view>
    </main>
  </div>
</template>

<template>
  <v-app>
    <v-toolbar app><v-toolbar-title>{{ title }}</v-toolbar-title></v-toolbar>
    <v-content>
      <v-container fluid>
        <v-layout row justify-center>
          <img src="./assets/logo.png"/>
        </v-layout>
        <v-layout row justify-center>
          <router-view></router-view>
        </v-layout>
      </v-container>
    </v-content>
    <v-footer app>
      <v-spacer></v-spacer>
      <div>© dokechin{{ new Date().getFullYear() }}</div>
    </v-footer>
  </v-app>
</template>

Hello.vue を編集

<template>
  <div class="ogura">
    <h1>{{ title }}</h1>
    <h2>{{ fuda }}</h2>
    <button id="next" v-on:click="nextFuda" :disabled="index == 99">読み上げ</button>
    <button id="again" v-on:click="read">もう一度</button>
  </div>
</template>

<template>
  <div class="ogura">
    <v-layout row justify-center>
      <h2>{{ fuda }}</h2>
    </v-layout>
    <v-btn large id="next" v-on:click="nextFuda" :disabled="index == 99">読み上げ</v-btn>
    <v-btn large id="again" v-on:click="read">もう一度</v-btn>
  </div>
</template>

そんな感じで動きました

以上、ハマらずに、動かすことができました。
vuetifyjsにはいっぱい部品もあるようなので使わない手はないかも。