How to use I18n inside Vue files in json sections

Question

I use vue.js, nuxt.js, I installed the i18n package, configured it, translation works fine, if text in a Vue file.

The Vue file has a menu that is loaded from json, which is on the same page.

It is my menu, loaded using json method:

   {
     id: 1,
     title: "Home",
     submenus: [
       {
         id: 1,
         title: "Home 1",
         url: "/",
       },
       {
         id: 2,
         title: "Home 2",
         url: "/home-2",
       },
       {
         id: 3,
         title: "Home 3",
         url: "/home-3",
       },
     ],
   }, 

EDIT: In Vue page i add i18n:

<script setup lang="ts">
const { locales, locale, setLocale } = useI18n();
const language = computed({
    get: () => locale.value,
    set: (value) => {
        setLocale(value);
    },
});

And menu is:

const menus = [
  {
    id: 1,
    title: "Home",
    submenus: [
      {
        id: 1,
        title: "Home 1",
        url: "/",
      },
      {
        id: 2,
        title: "Home 2",
        url: "/home-2",
      },
      {
        id: 3,
        title: "Home 3",
        url: "/home-3",
      },
    ],
  },
]

How i need translate title from id1 and title from submenus, how i can make it correctly?

I try to make title: "{t('main_menu'}",, but it doesn't work, it's only display this text.

Answer 1

You can use the Composer instance t that comes from useI18n() to translate:

const { t, locales, locale, setLocale } = useI18n();

title: t('main_menu')

Seen here in the documentation.