Registration parent component

registration.vue

<template>
  <q-layout view="hHh Lpr lFf" class="bg-green-1">

    <!-- (Optional) The Header -->
    <q-layout-header reveal>
      <q-toolbar class="bg-secondary">
        <q-toolbar-title class="row items-center">
          <router-link to="/user/providers" class="col-6 text-white">Dashboard</router-link>
          <a target="_blank" href="http://" class="col-6 text-right text-white">Providers</a>
        </q-toolbar-title>
      </q-toolbar>
    </q-layout-header>
    <!-- (Optional) A Drawer; you can add one more with side="right" or change this one's side -->
    <q-layout-drawer
      side="left"
      v-model="leftDrawer"
    >
      <!-- QScrollArea is optional -->
      <q-scroll-area class="fit q-pa-sm">
        <!-- Content here -->
      </q-scroll-area>
    </q-layout-drawer>

    <q-page-container>
      <transition name="fade">
        <div
          class="image-container" :style="{ 'background-image': `url(${sectionImage})` }"
        >
        </div>
      </transition>

      <!-- This is where pages get injected -->
      <registration-section-menu
        :routeBtn="routeBtn"
        class="menu-container"
      />
      <transition name="fade">
        <router-view
          :writeData="writeData"
          class="content-container"
        />
      </transition>
      <form-stepper
        :routeBtn="routeBtn"
      />
    </q-page-container>
    <q-layout-footer
      class="no-shadow q-pa-md"
      :style="{ color: footerColor }"
    >
      <div class="row">
        <p class="col col-xs-8">Questions? Email us: <a href="mailto:HR" class="text-primary">HR</a></p>
        <p class="col text-right">© 2018 Nannies</p>
      </div>
    </q-layout-footer>
  </q-layout>
</template>
<script>
  import SectionImages from 'pages/registration/json/sectionImages';
  import FormStepper from '../components/formElements/formStepper';
  import RegistrationSectionMenu from '../components/registrationElements/registrationMenu/registrationSectionMenu';
  import { colors } from 'quasar';

  export default {
    name: 'RegistrationLayout',
    props: ['header', 'subtitle'],
    components: {
      RegistrationSectionMenu,
      FormStepper,
    },
    beforeCreate() {
      this.applicationType = this.$route.path.split('/').splice(1)[1];
    },
    created() {
      colors.setBrand('primary', colors.getBrand('secondary'));
    },
    computed: {
      sectionImage() {
        const section = this.$route.name;
        return SectionImages[this.applicationType][section];
      },
      footerColor() {
        // Update for other footer colors
        return colors.getBrand('primary');
      },
    },
    data() {
      return {
        leftDrawer: false,
      };
    },
    methods: {
      routeBtn(path) {
        this.$router.push({
          path,
        });
      },
      writeData(section, prop, value) {
        const data = {
          type: this.applicationType,
          section,
          prop,
          value,
        };

        this.$store
          .dispatch(
            'applications/updateForm',
            data,
          );
      },
    },
  };
</script>

<style lang="stylus">
  @import '~variables'
  .fade-enter-active, .fade-leave-active
    transition opacity .5s

  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */
    opacity 0

  .image-container
    text-align center
    position relative
    height 40vh
    width 100%
    background-size cover
    background-position center center
</style>