<template> <v-app> <v-app-bar app style="position:fixed" absolute color="#43a047" dark shrink-on-scroll prominent src="https://picsum.photos/1920/1080?random" fade-img-on-scroll scroll-target="#scrolling-techniques-5" scroll-threshold="500" > <template v-slot:img="{ props }"> <v-img v-bind="props" gradient="to top right, rgba(55,236,186,.7), rgba(25,32,72,.7)" ></v-img> </template> <!-- --> </v-app-bar> <v-sheet id="scrolling-techniques-5" class="overflow-y-auto" max-height="600" > <v-container fluid style="height: 1500px;"> <v-main> <router-view></router-view> </v-main> </v-container> </v-sheet> <!-- Sizes your content based upon application components --> <v-footer color="primary lighten-1" padless > <v-row justify="center" no-gutters > <v-btn v-for="link in links" :key="link" color="white" text rounded class="my-2" > {{ link }} </v-btn> <v-col class="primary lighten-2 py-4 text-center white--text" cols="12" > {{ new Date().getFullYear() }} — <strong>Vuetify</strong> </v-col> </v-row> </v-footer> </v-app> </template> <script> export default { data: () => ({ links: [ 'Home', 'About Us', 'Team', 'Services', 'Blog', 'Contact Us', ], }), } </script>