[Vuejs]-Conditionally set main color in Vue

by

0👍

✅

So finally I set store value depending on my client and prepared set of SCSS classess specified for each client, i.e.:

.btn-client1 {
 background: red;
}

.btn-client2 {
 background: blue;
}
...

and I binded classes for specific elements: 

:class="`btn-${client}`"`

0👍

You can have 2 files, each file definne scss variable for different customer:

customer1_variables.scss

$brand-color: green

customer2_variables.scss

$brand-color: red

And you can import it in javascript file

main.js

switch (location.host) {
 case 'client1.com':
    import './customer1_variables.scss'
    ...
 case 'client2.com':
    import './customer2_variables.scss'
    ...
}

Another solution is using vue-style-component. You can check this article for more detail

Leave a comment