Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

RTL & Language Switch Vue -Metronic 8


I build the website to switch between 2 languages one LTR and the other one RTL,
so please guide us in building the output with both languages (RTL and LTR)
we are using Vue demo 8 and Metronic 8.1.6


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


Hi,

RTL webpack script was removed in metronic v8.1.6, to get rtl styles now you can reuse webpack or gulp script from our HTML version. https://preview.keenthemes.com/html/metronic/docs/getting-started/rtl.

Then you can manually copy the RTL file from HTML version into the assets folder and import this file in src/App.vue.

@import "assets/style.bundle.rtl.css";


Regards,
Lauris Stepanovs,
Keenthemes Support Team



we will try the suggested solution, but is there any plan to add the functionality of switching language and support RTL soon



Hi,

Yes, we have plans for RTL implementation into Vue in the next releases, implementation of RTL/LTR switch will work the same way as dark/light mode switches.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes/

Regards,
Lauris Stepanovs,
Keenthemes Support Team



I hope that , this is very good
So when is the next release date ?



Hi,

We usually do not confirm the exact ETA on new releases. We have a dynamic RTL/LTR switch implementation task on our to-do list, but we cannot say when it will be ready and released.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi,
Question one :
any update about dynamic RTL/LTR

Question two :
@import "assets/css/style.rtl.css";
@import "assets/sass/style";


I use first import for RTL and second import for LTR
Is there any way to use both dynamically .



Hi Hosam Nouri,

Our dynamic RTL/RTL switch solution is not ready at the moment.

I think you can try to wrap all rtl and ltr styles with some attribute or class and then in your javascript change those attributes depending on the current direction.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi ,
sorry but how I can do this wrap all rtl and ltr ?



Hi Hosam Nouri,

Please note that our Metronic Vue version does not support dynamic direction switch at the moment.

The only working solution we came up with at the moment is the dynamically switched main link tag href attribute.
In src/App.vue remove style imports below:

@import "assets/fonticon/fonticon.css";
@import "assets/sass/plugins";
@import "assets/sass/style";


Then generate RTL and LTR style using our HTML version gulp task and paste generated styles into Vue public folder.

Inside index.html add the link tag with default direction styles.

<link rel="stylesheet" href="/style.bundle.css">


Then inside your switcher, you can add two following functions to switch CSS href.


const setRtlMode = () => {
bodyStore.addBodyClassname("page-loading");
var link = document.getElementById("main-css");
link?.setAttribute("href", "/style.bundle.rtl.css");
document.documentElement.setAttribute("dir", "rtl");
document.documentElement.setAttribute("direction", "rtl");
document.documentElement.setAttribute("style", "direction:rtl");
setTimeout(() => {
bodyStore.removeBodyClassName("page-loading");
}, 1000);
};

const setLtrMode = () => {
bodyStore.addBodyClassname("page-loading");
var link = document.getElementById("main-css");
document.documentElement.removeAttribute("dir");
document.documentElement.removeAttribute("direction");
document.documentElement.removeAttribute("style");
link?.setAttribute("href", "/style.bundle.css");
setTimeout(() => {
bodyStore.removeBodyClassName("page-loading");
}, 1000);


These functions are quite heavy, we will overthink our rtl version in the next releases and will enable a dynamic style switch by default.

Stay tuned for updates via https://twitter.com/keenthemes and https://www.instagram.com/keenthemes/

Regards,
Lauris Stepanovs,
Keenthemes Support Team



thanks a lot, it worked for me



Hi Hosam Nouri,

Glad to hear that. All the best with your project!

Regards,
Lauris Stepanovs,
Keenthemes Support Team


Your Support Matters!

We will highly appreciate your Metronic Review on Themeforest.
Please go to Themeforest Downloads page, select Metronic & leave your feedback.

Hi ,
the RTL & LTR its working but I have bug
when I update the page ( Ctrl + R ) the main menu hide , then I open the inspect then the main menu display , I don't now why ...
I take the files from metronic 8 html 8.1.6 demo 8
demo8\dist\assets\css
- style.bundle.css
- style.bundle.rtl.css

I used :
Metronic 8
demo 8
version 8.1.6
vite 4.1.4
node 18.14.1



Hi,

Sorry for the late reply.

Unfortunately, we were not able to reproduce this issue. Have you modified anything in our styles?

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi,
No I don't modified in files styles
but I generate file styles from metronic html demo 8 V8.1.6 like when you told me before 3 weeks in same this ticket
and I used it in my project
metronic Vue demo 8
the RTL working but I told you what is the issue



Summary of what I want is :
style file working for RTL and LTR English & Arabic languages
My project in vuejs v8.1.6/ demo 8 /metronic 8
Thanks ..



Hi Hosam Nouri,

Thank you for sharing more information with us.

Unfortunately, we still we were not able to reproduce this issue successfully in Metronic v8.1.6.

Do you have any errors in your console?

I would suggest you to inspect your page source code and check if body has class aside-enabled.

Regards,
Lauris Stepanovs,
Keenthemes Support Team



Hi ,
yes has class aside-enabled ,
and no errors in console



Hi Hosam Nouri,

Could you please try to inspect your code in browser and check which styles hides aide menu?

Regards,
Lauris Stepanovs,
Keenthemes Support Team



we are all expecting it. please hurry!


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