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
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);
});
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();
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);
});
<div ...>{t(pageTitle)}</div>
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