Vuetify bottom nav cutting content
Wrap your content into <v-content></v-content> element and add app property to <v-bottom-nav> as mentioned by Traxo.
Working example: https://codepen.io/anon/pen/YRoexV
Since the release v2.3.0 https://github.com/vuetifyjs/vuetify/releases/tag/v2.3.0
v-content is now v-main, so the new way to structure this is something like this:
App.vue:
<template> <v-app> <AppBar/> <v-main> <router-view></router-view> </v-main> <BottomNavigation/> </v-app></template>BottomNavigation.vue:
<template> <v-container> <v-bottom-navigation fixed app > <v-btn> <span>Recents</span> <v-icon>mdi-history</v-icon> </v-btn> <v-btn> <span>Favorites</span> <v-icon>mdi-heart</v-icon> </v-btn> <v-btn> <span>Nearby</span> <v-icon>mdi-map-marker</v-icon> </v-btn> </v-bottom-navigation> </v-container></template>