how to change head meta data when switch the language in VUE?

Question

is there anyone ask that question yet ? if yes, please give me the link to read this question, if not, how to do that ? I want to change the head tittle and description each user switch the language , how can I do that ?? I do love to get some help, I am. a beginner for this :D

i have gallery.vue

i am using nuxt js here

and using nuxt-i18n based vue-i18n

<template lang="html">

  <div class="">
    <p> {{ $t('post') }}</p>
  </div>

</template>

<script>
export default {
  head () {
    return {
      tittle: // how to change tittle here for the spesific languange
    }
  }
}
</script>

<style lang="css">
</style>

i want the result like when in english the head tittle to be Gallery and when user switch the italianq , the head will be the Galleria

Answer 1

This maybe a bit late but to help new comers.

As per documentation you may use function to set meta data so with function you access data and computed (including this), check the code:

head() {
 return {
  title: this.$t('myTitle'),
  htmlAttrs: {
    lang: this.$i18n.locale,
  },
  meta: [
    {
      hid: 'description',
      name: 'description',
      content: this.$t('myDescription'),
    },
  ],
 }

},

source: https://nuxtjs.org/docs/2.x/features/meta-tags-seo#local-settings