while.vue

<template>

  <div id="content">

    <page-header
      v-if="page.acf.header.title"
      :title="page.acf.header.title"
      :alt="page.acf.header.alt || false"
      :content="page.acf.header.introduction" />

    <div class="content">
      <transition
        name="page"
        mode="out-in"
        @after-enter="afterEnter"
      >
        <component
          v-if="page.acf.page_type === 'standard'"
          :content="page.content.rendered"
          :is="page.acf.page_type" />
        <component
          v-else-if= "page.acf.page_type === 'works'"
          :projects="page.acf.projects"
          :is="page.acf.page_type">
        </component>
        <component
          v-else
          :components="page.acf.components"
          :is="page.acf.page_type" />
      </transition>
    </div>
    <nuxt-child />

  </div>

</template>

<script>

import standard from '@/components/content/standard'
import works from '@/components/content/works'
import dynamic from '@/components/content/dynamic'
import contact from '@/components/content/contact'
import get from 'lodash/get'
import isEmpty from 'lodash/isEmpty'
export default {

  name: 'SinglePage',

  components: { standard, dynamic, contact, works },
  computed: {
    isAlt () {
      return get(this.$store.state.page, 'acf.header.alt', false)
    },
    page () {
      return this.$store.state.page
    }
  },
  methods: {
    afterEnter () {
      alert('yo')
    }
  },
  head () {
    return {
      bodyAttrs: {
        class: `${this.page.type || 'frontpage'} ${this.page.slug} type-${this.page.acf.page_type || 'standard'} ${this.isAlt ? 'white' : ''}`
      },
    }
  },

  fetch ({ store, params, route }) {
    //   const page = (params.page !== null) ?

    if (isEmpty(params) || params.page === 'null') {
      return store.dispatch('getPage', store.state.app.frontPage)
    }
    return store.dispatch('getPage', params.page)
  },
}
</script>

<style lang="scss" scoped>
.page-enter-active {
  transition: all 0.3s ease;
}
.page-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}
.page-enter,
.page-leave-to {
  transform: translateX(10px);
  opacity: 0;
}

h1 {
  color: $white;
  .bg-effect {
    color: $dark;
  }
}
#content {
  overflow: hidden;
}
@for $i from 1 to 5 {
  .bg-effect:nth-child(#{$i}) {
    transition-delay: $i * 0.2s;
    &:before {
      transition-delay: $i * 0.15s;
    }
  }
}

#front {
  background: white;
}
.intro-text {
  font-size: 1.25rem;
  p {
    font-size: 24px;
    font-size: 1.5rem;
  }
}
.intro {
  padding: 80px 0;
  margin-bottom: 40px;
}
.hello {
  margin-bottom: 40px;
}
.hello .world {
  font-size: 72px;
  font-size: 3.5rem;
  font-weight: 800;
}
.language {
  letter-spacing: 0.04;
  color: $blue;
  font-size: 1.313rem;
}
.whatwedo {
  //height: 370px;
  max-width: 100%;
}
.whatwedo-wrap {
  //  display: flex;
  height: 100%;
  //  text-align: center;
  // justify-content: center;
  // align-items: center;
}
</style>