VUE and Vuetify

Vuefity is Material Design Component Framework for Vue. Highlights:

  • Ready-Made Project Scaffolding: Vuetify comes ready to go with 8 pre-made vue-cli templates. From simple html to full-blown SSR you are ready to go in minutes.
  • Semantic Material Components: Be prepared for an armada of specialized components at your disposal. With over 80 in total, there is a solution for any application.
  • Vibrant Community: When you run into a roadblock, you need assistance right away. Vuetify offers chat support in our growing community on Discord.

Create a project using Vue and Vuetify

1
2
3
4
5
npm install @vue/cli -g
vue create my-app
cd my-app
vue add vuetify
npm run serve

Notes:

  1. the default web site will be http://localhost:8080
  2. Version: “vue”: “^2.5.17”, “vuetify”: “^1.3.0”

#1 Involve an Apple Style footer

  1. Open the ‘App.vue’
  2. Add these code bellow the <v-content> element and within v-app.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    <v-content>
    <HelloWorld/>
    </v-content>

    <v-card height="100px" flat>
    <v-bottom-nav
    color="indigo"
    :value="true"
    fixed
    >
    <v-btn dark>
    <span>Video</span>
    <v-icon>ondemand_video</v-icon>
    </v-btn>

    <v-btn dark>
    <span>Music</span>
    <v-icon>music_note</v-icon>
    </v-btn>

    </v-bottom-nav>
    </v-card>
  3. open browser and test it.

Notes: for v-bottom-nav, use ‘fixed’ to make the footer always show at the bottom.