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 (12)
Ensure your future prospects shine bright with our meticulous degree certificate attestation in UAE, guaranteeing credibility across borders.
Get ready for your Umrah journey with the perfect Ihram. Find a comfortable, high-quality Ihram for Umrah to ensure a smooth and sacred pilgrimage experience. Shop now for your essential Umrah attire.
const pageTitle = computed(() => {
return t(route.meta.pageTitle as string);
});
const breadcrumbs = computed(() => {
return t(route.meta.breadcrumbs as string);
});
iq test
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
