Для цього нам буде потрібен модуль, який і дозволяє зробити сайт мульти-мовним - @nuxt/i18n. Але я думаю, що він у вас вже встановлений.
Першим кроком, ящко ви писали свої мета в nuxt.config.js/ts
, то видаліть їх звідти.
Далі в вашому індексному файлі App.vue
, пропишіть наступне:
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<script setup>
const { t } = useI18n()
useHead({
meta: [
{ hid: 'description', name: 'description', content: t(94) },
{ name: 'format-detection', content: 'telephone=no' },
{ name: "twitter:card", content: '/meta.jpg'},
{ name: "twitter:card", content: 'summary_large_image'},
{ name: "twitter:title", content: t(25) },
{ name: "twitter:description", content: t(94) },
{ property: "title", content: t(25) },
{ name: "description", content: t(94) },
{ property: "og:title", content: t(25) },
{ property: "og:description", content: t(94) },
{ property: "og:image", content: '/meta.jpg'}
]
})
</script>
NuxtLayout це мій код, я показав його для прикладу. Як ви бачите на прикладі, ми можемо використовувати useHead, та підтягувати переклади для поточної мови з i18n. Посилання на картинку ви також можете засунути в переклади, та теж підтягувати ключ перекладу.
Якщо на інших сторінках ви будете використовувати useHead, то вони переназначать конфліктуючі змінні в App.vue