Legal.vue

<template>
  <view-default>
    <div v-if="$apollo.loading">
      <p>loading...</p>
    </div>
    <div v-else-if="legals">
      <section class="hero is-info">
        <div class="hero-body">
          <div class="container">
            <h1 class="title">{{ title }}</h1>
            <h3 class="subtitle">{{ description }}</h3>
          </div>
        </div>
      </section>
      <section class="section">
        <div class="container">
          <div class="columns">
            <div class="column is-two-thirds">
              <div class="content">
                <vue-markdown-it :source="contentText"/>
              </div>
            </div>
            <div class="column">
              <p class="notification is-primary">
                {{ $t('last_updated' )}}:
                {{ moment(legals[0].last_updated).lang(locale).format("MMMM Do YY") }}
              </p>
            </div>
          </div>
        </div>
      </section>
    </div>
  </view-default>
</template>

<script>
// @ is an alias to /src
import VueMarkdownIt from 'vue-markdown-it'
import ViewDefault from '@/layouts/ViewDefault'
import { QUERY_LEGAL_EN, QUERY_LEGAL_FR } from '@/services/strapi/queries'
var moment = require('moment')

export default {
  name: 'legal',
  components: {
    ViewDefault,
    VueMarkdownIt
  },
  metaInfo () {
    return {
      title: this.locale === 'fr' ? this.legals[0].hero.title_fr : this.legals[0].hero.title_en,
      meta: [
        {
          name: 'description',
          content: this.locale === 'fr' ? this.legals[0].hero.description_fr : this.legals[0].hero.description_en
        }
      ]
    }
  },
  data () {
    return {
      moment: moment,
      locale: this.$i18n.locale,
      legals: '',
      slug: this.$route.params.slug
    }
  },
  computed: {
    title: function () {
      return this.locale === 'fr' ? this.legals[0].hero.title_fr : this.legals[0].hero.title_en
    },
    description: function () {
      return this.locale === 'fr' ? this.legals[0].hero.description_fr : this.legals[0].hero.description_en
    },
    contentText: function () {
      return this.locale === 'fr' ? this.legals[0].content.text_fr : this.legals[0].content.text_en
    }
  },
  apollo: {
    legals: {
      query () {
        if (this.$i18n.locale === 'fr') {
          return QUERY_LEGAL_FR
        } else {
          return QUERY_LEGAL_EN
        }
      },
      variables () {
        return {
          slug: this.slug
        }
      },
      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.legals.refetch()
    },
    $route (to, from) {
      // console.log('Route changed')
      // console.log(to, from)
      this.slug = to.params.slug
      this.$apollo.queries.legals.refetch()
    }
  }
}
</script>