Show Vue meta i18n variable names instead of values

Question

I have a vue2 project and use vue-meta and vue-i18n to localize the project. In my browser bookmarks, the title of the web page is not shown, instead the variable is shown. The same issue occurs in Google Analytics, it seems to show the variable instead of the value in the variable.

This is the code snippet of my Home component:

name: 'Home',
    metaInfo () {
      return {
      title: this.$t("home.meta.title"),
      meta: [{
        name: "description",
        content: this.$t("home.meta.descriptioncontent")
      }, {
        name: "keywords",
        content: this.$t("home.meta.keywordscontent")
      },
      { property: 'og:title', content: this.$t("home.meta.title")},
      { property: 'og:site_name', content: 'www.examplesite.se'},
      { property: 'og:description', content: this.$t("home.meta.descriptioncontent")},
      { property: 'og:type', content: 'Home'},
      { property: 'og:url', content: 'https://examplesite.se/'},
      { property: 'og:image', content: 'https://www.examplesite.se' '/img/' 'example_logo_social.png'}
      ]
      }
    },
    data() {
      return {
        fimagefolder: '../../Images/',
        bimagefolder: '../../fImages/',
      };
    },

So this.$t("home.meta.title") variable stores the Swedish and English translations. Inside the site, it shows the correct title in both languages, but Google Analytics only shows "home.meta.title".

From what I understand, the crawler can't see my variable values ​​because it doesn't have any scripts loaded. Any ideas?

Answer 1

It would be nice to see some of your code so we can understand how you set it up, otherwise we're a bit in the dark and have a hard time helping you. So, this is more of a comment than an answer, but I'll share some code that might help that can't be put in a comment.

I assume you are using vue-i18n, and I guess you are defining vueMeta as an object. However, if you define it as a function, you can access other component data, including this.$t. They should work together like this:

<template>
<div>
    <p>这个页面的标题应该是“Translated Title”。</p>
</div>
</template>

<script>
export default {
    metaInfo () {
        return {
            title: this.$t('title')
        }
    }
}
</script>

<i18n>
{
    "en": {
        "title": "Translated Title"
    }
}
</i18n>