Home.vue

<template>
  <view-default>
    <div v-if="$apollo.loading">
      <LoadingState/>
    </div>
    <div v-else-if="homepage">
      <section class="hero is-fullheight-with-navbar is-info">
        <div class="hero-body">
          <div class="container">
            <h1 class="title">{{ intro }}</h1>
            <h3 class="subtitle">{{ slogan }}</h3>
            <div class="buttons">
              <a
                v-for="item in homepage.hero.button"
                :key="item.icon"
                :href="item.href"
                class="button"
                :class="item.class"
              >
                <span class="icon"><font-awesome-icon :icon="item.icon" /></span>
                <span>{{ locale === 'fr' ? item.text_fr : item.text_en }}</span>
              </a>
            </div>
          </div>
        </div>
      </section>
      <section class="section">
        <div class="container">
          services..
        </div>
      </section>
    </div>
  </view-default>
</template>

<script>
// @ is an alias to /src
import ViewDefault from '@/layouts/ViewDefault'
import LoadingState from '@/components/ui/LoadingState'
import { QUERY_HOMEPAGE_EN, QUERY_HOMEPAGE_FR } from '@/services/strapi/queries'

export default {
  name: 'home',
  components: {
    ViewDefault,
    LoadingState
  },
  data () {
    return {
      homepage: '',
      locale: this.$i18n.locale
    }
  },
  computed: {
    intro: function () {
      return this.locale === 'fr' ? this.homepage.hero.intro_fr : this.homepage.hero.intro_en
    },
    slogan: function () {
      return this.locale === 'fr' ? this.homepage.hero.slogan_fr : this.homepage.hero.slogan_en
    }
  },
  apollo: {
    homepage: {
      query () {
        if (this.$i18n.locale === 'fr') {
          return QUERY_HOMEPAGE_FR
        } else {
          return QUERY_HOMEPAGE_EN
        }
      },
      error (error) {
        console.log(error)
        this.$router.push({ path: '/error' })
      }
    }
  },
  watch: {
    '$i18n.locale': function () {
      // console.log('Locales changed')
      this.locale = this.$i18n.locale
      this.$apollo.queries.pages.refetch()
    }
  }
}
</script>