Translation
import { useI18n } from "vue-i18n";
const i18n = useI18n()
how I can use it in folder router in index.ts file to translate for example :pageTitle: "title",
breadcrumbs: ["bread"],
I have tried a lot but to no avail
Metronic demo 8 version 8.1.7
node v18.12.0
npm 9.1.2
Thanks
Replies (9)
Hi Hosam Nouri,
You can use here a different approach, instead of translating these properties inside index.ts you can set the keys and then inside PageTitle.vue you can display translation values.
Here is an example.
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const pageTitle = computed(() => {
return t(route.meta.pageTitle as string);
});Regards,
Lauris Stepanovs,
Keenthemes Support Team
Sorry but not working
I will explain to you
In my route file i have like this : {
path: "/iphone",
name: "iphone",
component: () => import("@/views/device/iphones/iphone.vue"),
meta: {
pageTitle: "iphone",
breadcrumbs: ["samsung"],
},
},
What I want is a translation value of pageTitle Its value here is equal " iphone "
so how I can do this
Please explain to me
Hi Hosam Nouri,
You can translate this value using t function which you get form useI18n().
import { useI18n } from "vue-i18n";
const { t } = useI18n();As a parameter t function expects key and returns value by current language.
Did you add your key into file src/core/plugins/i18n.ts language configuration?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
Yes I did ,
I added the key into i18n.ts , not working
I useed this way in my all components and its working very well ,
but the issue when i want use it in route.ts{
path: "/iphone",
name: "iphone",
component: () => import("@/views/device/iphones/iphone.vue"),
meta: {
pageTitle: "iphone",
breadcrumbs: ["samsung"],
},
},
What I want is a translation value of pageTitle Its value here is equal " iphone "
Hi Hosam Nouri,
If you want to translate these values inside index.ts you can refer to this comment.
https://github.com/intlify/vue-i18n-next/discussions/613#discussioncomment-2265983
I would suggest you instead of translating values inside the router file translate them inside components whenever you are using the page title.
Regards,
Lauris Stepanovs,
Keenthemes Support Team
How I can translate them inside components ,
How can I access the router file from the component ?
Hi Hosam Nouri,
You can use the code from my first comment.
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const pageTitle = computed(() => {
return t(route.meta.pageTitle as string);
});Then just display the output of pageTitle in your markup.
Or you can return t function and then use it inside a markup directly.
<div ...>{t(pageTitle)}</div>Regards,
Lauris Stepanovs,
Keenthemes Support Team
The thing I want is in the pageTitle.vueconst pageTitle = computed(() => {
return t(route.meta.pageTitle as string);
});
const breadcrumbs = computed(() => {
return t(route.meta.breadcrumbs as string);
});
Thanks ...
Hi Hosam Nouri,
Glad to hear that it worked for you. All the best with your project!
Regards,
Lauris Stepanovs,
Keenthemes Support Team
React Dev Vacancy
