vuetify 활용하기1(appbar, footer, navigation drwer 만들기)

-app bar 앱바 만들기

vuetifyjs.com/ko/components/app-bars

App-bar component — Vuetify.js

 

 

-footer 만들기

https://vuetifyjs.com/ko/components/footer/

Footer component — Vuetify.js

-Navigation Drawer 만들기

https://vuetifyjs.com/ko/components/navigation-drawers/

Navigation drawer component — Vuetify.js

<template>
 <v-app>
   ...
  <!-- drawer 토글역할을 함. 누르면 나오고 누르면 들어가고... -->
  <v-app-bar-nav-icon @click="drawer = !drawer"/>
  <!-- drawer 삽입 -->
   <v-navigation-drawer app v-model="drawer">
   </v-navigation-drawer>
   ...
 </v-app>
</template>

<script>
export default {
  name: 'App',
  //추가한 내용. 처음에는 drawer가 false로 들어가있음.
  data () {
    return {
      drawer: false
    }
  }
}
</script>