[Vuejs]-Vue meta i18n variable name showing instead of value

by

1👍

It would be good to see some of your code to see how you have set it up, otherwise we are a bit in the dark and it is hard to help. So, this is more of a comment than an answer, but I am sharing some code that might help and that won’t fit in a comment.

I am assuming you are using vue-i18n and my guess is that you are defining vueMeta as an object. Whereas, if you define it as a function you can access other component data, including this.$t. It should work together like this:

<template>
<div>
    <p>The title of this page should be 'Translated Title'.</p>
</div>
</template>

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

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

0👍

i found the solution.
This issue occured due to having my Meta details in both my view components And my App component.
When i removed my Meta details from the App component the issue does not occur.

I Believe it’s because the locale does not become active until after the app component is mounted. Therefore the meta variable is null until a few milliseconds after.

Leave a comment