Vuejs SPA need to load css for ltr and rtl based on language

Question

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

score 0 · Answer 1 · answered Nov 12 '17 at 14:21

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 ?

answered Nov 12 '17 at 14:21

trk

2,106
14
20

Isn't the tag supposed to be in the section of the document? – Storm Nov 22 '17 at 08:42
Interesting :) I found an answer here https://stackoverflow.com/questions/4957446/load-external-css-file-in-body-tag, will try and see and mark as accepted if it works smoothly – Storm Nov 22 '17 at 08: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 '17 at 10:00
So this worked https://stackoverflow.com/a/30308194/136999, just need to see if it can be validated by an HTML 5 validator – Storm Dec 10 '17 at 10:47

score 0 · Answer 2 · answered Oct 06 '19 at 12:19

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

answered Oct 06 '19 at 12:19

kabapy

169
2
7

Vuejs SPA need to load css for ltr and rtl based on language

2 Answers2