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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

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.vue

const 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


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

React Dev Vacancy

KeenThemes is looking for a Junior React or Vue developer to build awesome apps.
Apply
keenthemes mega bundle