# Vuetify 2.0 で Toolbar, Navigation Drawers, Menus を作る
追記: 以下の手順の実施するかわりに、すぐに使える vuetify-nav (opens new window) コンポーネントもご利用いただけます。詳細はこちらの blog (opens new window)で
本稿では Vuetify 2.0 の空のプロジェクトに Toolbar を用意して Menu と Navigation Drawerを作成する方法をご紹介いたします。完成形はこちら (opens new window)で確認できます。作成済のファイルはこちらから取得できますので、ご自身のプロジェクトの土台としてご利用いただく事ができます
# 空のプロジェクトの準備
こちらの手順で vue-cli で作成するか、こちらの完成ファイルを利用します
# Toolbar
# Navbar コンポーネントの作成
components フォルダに Navbar.vue ファイルを以下のように作ります
<template>
</template>
<script>
export default {
}
</script>
# App.vue で Navbar をインポート
<template> に <Nabvar /> タグを、 <script> に import 、及び export default に components 行を追加します.
<template>
<v-app>
<Navbar />
<v-content>
<router-view></router-view>
</v-content>
</v-app>
</template>
<script>
import Navbar from '@/components/Navbar'
export default {
name: 'App',
components: { Navbar },
data: () => ({
//
}),
};
</script>
# Navbar.vue コンポーネントの <nav> タグのスロットに <v-toolbar> を追加
<template>
<nav>
<v-toolbar></v-toolbar>
</nav>
</template>
<script>
export default {
}
</script>
# Google Material Icon CSS を public フォルダの index.html に追加
Material Icon を使うために css を link します
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>ulbl-vuetify</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but ulbl-vuetify doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
# Navbar.vue コンポーネントの <v-toolbar> の内容に、例えば title や button を追加
<template>
<nav>
<v-toolbar>
<v-toolbar-title class="grey--text">
<span class="font-weight-light">Site</span>
<span>Title</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn text>
<span>Sign Out</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
</nav>
</template>
# Navigation Drawers
# Navbar.vue コンポーネントの <nav> タグのスロットに <v-navigation-drawer> を追加
<v-navigation-drawer> を以下のように追加します
<nav>
<v-toolbar>
<v-toolbar-title class="grey--text">
<span class="font-weight-light">Site</span>
<span>Title</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn text>
<span>Sign Out</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
<v-navigation-drawer v-model="drawer" app class="primary">
<p>test</p>
</v-navigation-drawer>
</nav>
v-navigation-drawer の可視性を v-model="drawer" で操作できるよう、 drawer を export default に追加
<script>
export default {
data: () => ({
drawer: true
}),
}
</script>
# Navbar.vue に <v-app-bar-nav-icon> を追加
<v-toolbar>
<!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
<v-app-bar-nav-icon class="grey--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title class="grey--text">
<span class="font-weight-light">Site</span>
<span>Title</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn text>
<span>Sign Out</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
# Navbar.vue の drawer のデフォルトを false に変更
<script>
export default {
data: () => ({
drawer: false
}),
}
</script>
# Navigation drawer にリストを追加
Navbar.vue の <v-navigation-drawer> に <v-list> を追加します
<v-navigation-drawer v-model="drawer" app class="primary">
<v-list>
<!-- v-list-tile is changed to v-list-item -->
<v-list-item>
<v-list-item-action>
<v-icon class="white--text">Home</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title class="white--text">About</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
Navbar.vue の data オブジェクトに link を追加します.
<script>
export default {
data: () => ({
drawer: false,
links: [
{ icon: 'home', text: 'Home', route: '/'},
{ icon: 'contacts', text: 'About', route: '/about'},
]
}),
}
</script>
v-list-item に v-for を追加し、 文字列リテラルをそれぞれ変数に変更します
<v-navigation-drawer v-model="drawer" app class="primary">
<v-list>
<!-- v-list-tile is changed to v-list-item -->
<v-list-item v-for="link in links" :key="link.text" router :to="link.route">
<v-list-item-action>
<v-icon class="white--text">{{ link.icon }}</v-icon>
</v-list-item-action>
<v-list-item-content>
<v-list-item-title class="white--text">{{ link.text }}</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-navigation-drawer>
# Menus
# Navbar.vue の v-toolbar に v-menu を追加
<v-toolbar>
<!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
<v-app-bar-nav-icon class="grey--text" @click="drawer = !drawer"></v-app-bar-nav-icon>
<v-toolbar-title class="grey--text">
<span class="font-weight-light">Site</span>
<span>Title</span>
</v-toolbar-title>
<v-spacer></v-spacer>
<!-- dropdown menu -->
<v-menu offset-y>
<template v-slot:activator="{ on }">
<!-- <v-btn text slot="activator"> -->
<v-btn text v-on="on">
<v-icon left>expand_more</v-icon>
<span>Menu</span>
</v-btn>
</template>
<v-list>
<!-- v-list-tile is changed to v-list-item -->
<v-list-item v-for="link in links" :key="link.text" router :to="link.route">
<v-list-item-title>{{ link.text }}</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
<v-btn text>
<span>Sign Out</span>
<v-icon right>exit_to_app</v-icon>
</v-btn>
</v-toolbar>
# 完成ファイルの利用
# git clonw
このドキュメントの手順の完成ファイルは下記コマンドで clone することができます
git clone https://github.com/UedaTakeyuki/template4vutify.git -b v02
# 初期化
template4vutify フォルダに移動し、npm install で vue や vuetify 等の必要なパッケージをインストールます
cd template4vutify
npm install
# テストサーバの起動
npm run serve でテストサーバを起動します
http://localhost:8080/ もしくはテストサーバを起動したマシンの IP Address のポート 8080 番でテストサーバにアクセスできます
# references
gnulnx's comment (opens new window) How do I use the icons!?, issue #2663 of vuetify.
Refer Vuetify Tutorial #8 - Navigation Drawers (opens new window) Note: Vuetify 2.0 に対応するために本稿では
<v-toolbar-side-icon>を<v-app-bar-nav-icon>に変更していますVuetify Tutorial #10 - Lists (opens new window) Note: Vuetify 2.0 に対応するために本稿では
<v-list-tile>を<v-list-item>に変更していますVuetify Tutorial #22 - Menus (opens new window) Note: slot="activator" is not worked, need
<template v-slot:activator="{ on }">.