reportCard.vue

<template>
  <v-app class="the-app">
    <Notifications />
    <MainAppBar :permanently-pinned="true" :search-term="searchTerm">
      <template #logo>
        <Logo />
      </template>
    </MainAppBar>
    <v-main class="lowered">
      <nuxt />
    </v-main>
    <Footer />
  </v-app>
</template>

<script>
import MainAppBar from '~/web-components-submodule/components/common/Masthead/MainAppBar.vue'
import Footer from '~/components/footer/Footer.vue'
import Notifications from '~/web-components-submodule/components/common/Notifications.vue'
import Logo from '~/components/Logo.vue'

export default {
  components: {
    MainAppBar,
    Footer,
    Notifications,
    Logo,
  },
  computed: {
    searchTerm() {
      return this.$route.params.term
    },
  },
}
</script>
<style scoped>
.lowered {
  margin-top: 80px;
}
</style>