Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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

</a>


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(