0

I'm building a website using Vue but I have 2 separate css files, 1 for normal ltr and one for rtl.

Now according to the URL xyz.com/en or xyz.com/ar I can serve the appropriate file, based on server-side logic. However, I want this to be done on the client via Vue Router.

So that the URLs can look like this xyz.com/#/en or xyz.com/#/ar

2 Answers 2

0

You could have language specific CSS inclusions <link href="..." /> from the respective components for EN and AR as shown below.

routes: [
    {
      path: '/en',
      name: 'Welcome EN...',
      component: WelcomeEN
    },
    {
      path: '/ar',
      name: 'Welcome AR...',
      component: WelcomeAR
    }
  ]

Do you think that would work for you ?

4
  • Isn't the <link> tag supposed to be in the <head> section of the document?
    – Storm
    Nov 22, 2017 at 8:42
  • Interesting :) I found an answer here stackoverflow.com/questions/4957446/…, will try and see and mark as accepted if it works smoothly
    – Storm
    Nov 22, 2017 at 8:43
  • Well, technically it does work but it's not the recommended practice... So I would not like to use this technique for a public facing website...
    – Storm
    Dec 10, 2017 at 10:00
  • So this worked stackoverflow.com/a/30308194/136999, just need to see if it can be validated by an HTML 5 validator
    – Storm
    Dec 10, 2017 at 10:47
0

this is an example of conditional css loading inside a component

// change x to change color
const x = true;
if(x)
   require("./assets/style.css");
else
   require("./assets/stylegreen.css");

code snippet of conditional css loading in vue

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.