ViewDefault.vue

<template>
  <div class="view-default">
    <header class="header">
      <app-navbar v-bind:isFixedTop="true" />
    </header>

    <div id="wrapper">
      <slot></slot>
    </div>

    <app-footer/>
  </div>
</template>

<script>
// @ is an alias to /src
import AppNavbar from '@/components/AppNavbar'
import AppFooter from '@/components/AppFooter'

export default {
  name: 'view-default',
  components: {
    AppNavbar,
    AppFooter
  },
  metaInfo: {
    bodyAttrs: {
      // Required for the fixed navbar by Bulma
      class: 'has-navbar-fixed-top'
    }
  },
  props: {
    heroClass: String,
    heroBody: Boolean
  }
}
</script>

<style lang="scss" scoped>
.view-default {
  display: flex;

  // Use this if navbar is fixed
  min-height: calc(100vh - #{$navbar-height});

  // Use this if navbar is NOT fixed
  // min-height: 100vh;
  flex-direction: column;
}

#wrapper {
  flex: 1 0 auto;
}
</style>