Translate using vue-i18n in page components

Hello Team,

We have used vue-i18n plugin same as it is used in the menu to translate text but we are facing issues when the route changes and constants get loaded delayed.

Currently, our implementation is working fine but when we clear the cache and then shift to another page from one page at that time wherever we have used translate it displays the constant of the translate text, and then when it loaded fully then it shows the updated text.

Here's the sample implementation:

import { useI18n } from "vue-i18n/index";

const { t } = useI18n();

//Set page breadcrumbs
const setBreadCrumbs = (total) => {

setCurrentPageBreadcrumbs(t("INK_LIST", { total: "("+total+")" }), [{ name: t("INK_LIST"), active: true }]);
};

Here's the recorded screen for your reference:

https://rxteam376-my.sharepoint.com/personal/priyank_patel_rxteam376_onmicrosoft_com/_layouts/15/stream.aspx?id=%2Fpersonal%2Fpriyank%5Fpatel%5Frxteam376%5Fonmicrosoft%5Fcom%2FDocuments%2Fsample%2Ewebm&referrer=Teams%2ETEAMS%2DELECTRON&referrerScenario=p2p%5Fns%2Dbim&ga=1

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 (1)

Hi Priyank,

I wasn't able to open a video you provided due to access permissions. The code you attached looks fine and it should work, and it seems like it works synchronously. Could you please provide more info about your issue? If you are fetching your translation keys asynchronously, could you please attach this code as well?

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  :(