How can I ensure that all 3 page links in the nav are displayed in 3 languages of user choice? Initially, the language change works fine on page load. However, after clicking on a language change link once, only the last link's language changes instead of all of them. What is causing this issue and how can it be resolved?
app.vue:
<template>
<nav class="navbar">
<NuxtLink class="pagelink" :key="page.slug" v-for="page in strings.pages" :href="'/' + page.slug">{{ page.name[lang] }}</NuxtLink>
<Languages />
</nav>
</template>
<script>
import Languages from "./components/languages.vue"
import languages from "../services/languages"
export default {
name: "Navbar",
data() {
return {
open: false,
strings: {
pages: [
{
slug: 'home',
name: { az: "Əsas", ru: "Главная", en: "Home" }
},
{
slug: 'about',
name: { az: "Haqqımızda", ru: "О нас", en: "About" }
},
{
slug: 'contact',
name: { az: "Əlaqə", ru: "Связаться", en: "Contact Us" }
}
]
}
}
},
computed: {
lang() {
return languages(this)
}
}
}
</script>
<style>
* {
margin: 10px;
}
</style>
languages.vue:
<template>
<div class="languages">
<NuxtLink :to="route.path + '?hl=az'">AZ</NuxtLink>
<NuxtLink :to="route.path + '?hl=ru'">RU</NuxtLink>
<NuxtLink :to="route.path + '?hl=en'">EN</NuxtLink>
</div>
</template>
<script>
export default {
name: "Languages",
setup() {
const route = useRoute()
return {
route
}
}
}
</script>
<style scoped>
div,
div a {
height: 40px;
display: inline-block;
}
img {
height: 60%;
display: inline-flex;
margin: 8px;
}
</style>
languages.js:
function languages(page) {
let langCookie = useCookie("language")
let language = langCookie.value
if (page.$route.query.hl) {
language = page.$route.query.hl
langCookie.value = language
}
return language || 'az';
}
export default languages