i18n problem with vue -- AppNavbar.vue:12 Uncaught (in promise) ReferenceError: $t is not defined

Question

I am trying to put {{ $t("xxxxxx") }} in an array inside a Vue component. So that I can create divs with translations and routes dynamically.

The idea is, change this:

const navigation = 
  [
    {
      name: "Full Service",
      route: "/fullService",
    }
  ]

to this:

const navigation = 
  [
    {
      name: {{ $t("fullservice") }},
      route: "/fullService",
    }
  ]

I've tried to put like this:

const navigation = 
  [
    {
      name: "Full Service",
      route: "/fullService",
    },
    {
      name: $t("verkauf"),
      route: "/sale",
    },
    {
      name: $t("vermietung"),
      route: "/rental",
    },
    {
      name: "Streaming",
      route: "/streaming",
    },
    {
      name: "Smart Home",
      route: "/smartHome",
    },
    {
      name: $t("kontakt"),
      route: "/contact",
    },
    {
      name: $t("impressum"),
      route: "/imprint",
    },
    {
      name: $t("cookieRichtline"),
      route: "/cookiePolicy",
    }
  ];

<template>

 <div v-for="item in navigation"  class="
                  text-mst_white
                  text-bold
                  transform
                  transition
                  duration-300
                  hover:text-mst_orange
                  py-5
                  px-2
                ">
                <router-link :to="item.route">{{ item.name }}</router-link>
              </div>

</template>

I've tried to split the code in diferents parts...create variables, make jsons... But I don't have idea how to do it.
Could anyone help me? Thanks!

Answer 1

When you need vue-i18n outside of <template> in Vue SFCs you need to explicitly import the i18n module in your JS file before using it:

import { useI18n } from 'vue-i18n'

const t = useI18n()

const navigation = [
  {
     name: t("verkauf"),
     route: "/sale",
  },
  // ...
]

Docs: https://vue-i18n.intlify.dev/api/composition#usei18n

Answer 2

I found the solution. In the component:

<script setup> const navigation = [ { name: "Full Service", route: "/fullService", }, { name: "buttons.verkauf", route: "/sale", } ]

<nav class="hidden items-center 2xl:space-x-1 xl:flex">
  <div v-for="item in navigation" class="
                  text-mst_white
                  text-bold
                  transform
                  transition
                  duration-300
                  hover:text-mst_orange
                  py-5
                  px-2
                ">
 <router-link :to="item.route">{{ this.$t(item.name) }}</router-link>
  </div>
</template>

In i18n.js:

import { createI18n } from 'vue-i18n';

import messages from './locales';

const i18n = createI18n({ legacy: false, locale: 'DE', messages: messages, });

export default i18n;

In locales.js:

import de from './de.json';

import en from './en.json';

const messages = { DE: de, EN: en, };

export default messages;