Skip to content

Latest commit

 

History

History
161 lines (126 loc) · 4.6 KB

README.md

File metadata and controls

161 lines (126 loc) · 4.6 KB
Raw

04-vuetify

やること

Vuetify.jsを使って、マテリアルデザインに適応したコンポーネントを実装しましょう。

手順

03-api-connectionで使用したプロジェクトに追加実装していきます。

  1. Vuetify.jsの導入
  2. Vuetify.jsの使い方
  3. 基本レイアウトの実装
  4. NavigationDrawerとToolbarの導入
  5. チャレンジ

Vuetify.jsの導入

  • プロジェクトにVuetify.jsを導入します。
  • 今回は@nuxtjs/vuetifyパッケージを使用します。
  • package.jsonのdependenciesに"@nuxtjs/vuetify": "0.4.3"を追加してください。
  • 追加したら、$ npm installを実行してください。

/package.json

{
  "name": "hello-nuxt",
  "dependencies": {
    "@nuxtjs/vuetify": "0.4.3",
    "axios": "0.18.0",
    "nuxt": "2.3.4"
  },
  "scripts": {
    "start": "nuxt"
  }
}
  • /nuxt.config.jsを作成し、以下の内容を書いて保存してください。
  • vuetify.themeにカラーテーマを設定することができます。
  • 便利なTheme generatorが利用できます。

/nuxt.config.js

module.exports = {
  modules: ["@nuxtjs/vuetify"],
  vuetify: {
    theme: {
      primary: "#009688",
      secondary: "#80CBC4",
      accent: "#1565C0",
      error: "#f44336",
      warning: "#ffeb3b",
      info: "#2196f3",
      success: "#4caf50"
    }
  }
};

これでVuetify.jsを使う準備が整いました。

Vuetify.jsの使い方

  • Vuetify.jsのサイトのUI componentsのメニューからコンポーネントを探して実装していきます。
  • コンポーネントの詳細ページでデモやサンプルコード、APIを確認することができます。
  • 基本的にはサンプルコードをベースに、APIを見ながらカスタマイズした上でプロジェクトに実装していきます。

基本レイアウトの実装

  • Pre-defined layoutsのDefault application markupを参考にレイアウトを実装していきます。
  • 全体をv-appタグでラップし、v-navigation-drawerとv-toolbarについてはmenu-listで実装することとします。

/layouts/default.vue

<template>
  <v-app>
    <menu-list />
    <v-content>
      <v-container fluid>
        <nuxt />
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import MenuList from "~/components/MenuList";

export default {
  components: { MenuList }
};
</script>

NavigationDrawerとToolbarの導入

  • ToolbarとNavigation drawerを導入します。
  • /components/MenuList.vueを以下のように実装してください。
  • dataでdrawerの表示と非表示のフラグを定義し、v-navigation-drawerタグのv-modelに渡しています。
  • v-toolbar-side-iconタグの@clickでフラグを切り替えています。

/components/MenuList.vue

<template>
  <div>
    <v-navigation-drawer app v-model="drawer">
      <v-list>
        <v-list-tile @click="route('/')">
          <v-list-tile-content>
            <v-list-tile-title>HOME</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
        <v-list-tile @click="route('/items')">
          <v-list-tile-content>
            <v-list-tile-title>ITEMS</v-list-tile-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-navigation-drawer>
    <v-toolbar app dark color="primary">
      <v-toolbar-side-icon  @click="drawer = !drawer"></v-toolbar-side-icon>
      <v-toolbar-title>Item Management System</v-toolbar-title>
    </v-toolbar>
  </div>
</template>

<script>
export default {
  data: function() {
    return {
      drawer: false
    };
  },
  methods: {
    route(url) {
      this.$router.push(url)
    }
  }
};
</script>

チャレンジ

  • Vuetify.jsのサイトを参照しながら、ページを装飾していきましょう。
  • サンプルコードでは以下のコンポーネントを使用しています。