Setting the main color in Vue based on certain conditions

After developing a Vue app as a reusable library and setting the global $brand-color variable in the SCSS file to define the main color theme of the app, I encountered an issue when trying to integrate it for a new client who required a different brand color.

The current approach involves using conditional statements based on the location.host value to dynamically set the $brand-color for each client. While this method works, it requires manual adjustments in multiple components which can be quite laborious.

switch (location.host) {
 case 'client1.com':
    context.commit('setMainColor', '#ff0000');
    ...
 case 'client2.com':
    context.commit('setMainColor', '#16c100');
    ...
}

However, this process is tedious and not very efficient. Is there a more effective solution than individually binding styles to each component?

Additionally, utilizing CSS variables is not an option due to compatibility issues with Internet Explorer. Is there a better way to handle changing brand colors for different clients while maintaining code integrity?

vue.jssassvuejs2vue-component

Answer №1

To customize the styling for different customers, you can create separate SCSS variable files:

customer1_variables.scss

$brand-color: green

customer2_variables.scss

$brand-color: red

Then, you can import these files in your JavaScript file:

main.js

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

Alternatively, you can also use vue-style-component. Here is a helpful article on implementing live theming with Vue.js and styled components: this article

Answer №2

After much consideration, I decided to assign store values based on individual clients and created a set of SCSS classes specifically tailored for each client. For example:

.btn-client1 {
 background: red;
}

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

I then applied these classes to specific elements using the following binding:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to display an HTML element conditionally with v-if based on a variable's value

Looking for a way to display a <div> element, including nested <div>s, based on the value of a variable. I'm currently using v-if, but open to better suggestions. I attempted wrapping the entire <div> in a <template v-if> as s ...

htmlvue.js

Using Vue.js to make an AJAX request to an API that returns a list in JSON format

I am attempting to utilize an AJAX call with the free API located at that returns a list in JSON format. My goal is to display the result on my HTML using Vue.js, but unfortunately, it doesn't seem to work as expected. This is my JavaScript code: va ...

javascriptjsonajaxvue.js

The method wrapper.setValue() is not suitable for use on EL-INPUT

Attempting to call a Vue component for unit testing with Jest, trying to set a value in an input text field. Below is the content of my "file.vue" file: <el-form-item label="Nombre" data-test="id-form"> <el-input v ...

node.jsvue.jsunit-testingjestjsbabel-jest

Implement a Vue component using JSX and explore how to seamlessly bind events with the sync modifier

MyComponent Implementation props: ['visible'] methods: { update () { this.$emit('update:visible') } } When I use this component in JSX: <MyComponent visible={this.visible} {...{['on-update:visible']: console ...

eventsvue.jsjsx

Exploring the Length of an Array with the v-for Directive in Vue.js

https://i.stack.imgur.com/AZipr.png How can I display the total number of students using VueJs? Below is the Grapql API I am working with: query{ allStudents{ totalCount edges{ node{ id lastName email } } ...

vue.jsgraphql

Error: content within v-html directive not displaying as expected

The v-html content is not rendering correctly for me. Interestingly, when I remove the v-html in the first list item, it works fine. Take a look at my code below: <div> <br> <li v-html="`a`"> <ul> <li ...

htmlvue.js

refresh the localstorage array using vanilla JavaScript

I am attempting to remove an element from an array stored in local storage. I am using vanilla JavaScript within a Vue.js 3 component. Here is my array: ["96", "281", "287", "415", "650", "661", & ...

javascriptvue.jsfrontend

Updating Object Properties in Vue.js 2.0 using Methods

I am facing an issue where I have an object with blank properties in my component's data. I want to update these properties using a method that is triggered by a click event on one of the listed elements. However, when I check the click event in the c ...

javascriptobjectvue.jsmethods

html table displaying incorrect data while using dynamic data in vue 3

example status 1 Hello there! I'm trying to create a table (check out example status 1 for guidance). Here's the code snippet I am using: <table> <tr> <th>Product</th> <th>Price</th> <th>Av ...

htmlvue.jshtml-tablevuejs3

Troubleshooting Vue.js and Laravel: Having trouble loading new image files, while the older ones load just fine

Currently, I am working on a project that involves Vue.js and Laravel. In this setup, Vue is located inside the resources/js directory of the Laravel project. My current issue revolves around loading an image from the resources/js/assets directory. While ...

javascripthtmllaravelvue.js

Iterating through and dispatching to the modal窶ｦ

Can someone help me figure out why I am encountering a problem where clicking on the button below results in seeing three different objects before being told that invoice is undefined? <tr :key="invoice" v-for="(invoice, index) in invoices"> & ...

vue.jsvuejs2

Convert form data into a JSON object using Vue.js

I'm attempting to generate a JSON object from the submitted form data. Fortunately, I've accomplished this using a variable. However, is there an alternative approach for creating a JSON object? Form <form @submit.prevent="submit"& ...

javascriptarraysjsonvue.js

How can Vue components be created without using a template?

How can I correctly implement the functionality needed for my application? After user authorization, it should return back to the application via a link with a callback function - localhost / callback. At this point, there is no need to render anything, as ...

vue.js

Is it advisable to incorporate vue-resource in Vuex actions?

I am currently working on a web application that retrieves airport data from the backend. To manage states and data sharing, I am utilizing Vuex. My dilemma is whether to load the airports in my Vuex actions or within a method of my Vue instance which will ...

javascriptvue.jsvue-resourcevuex

What is the best way to initiate the handling of newly inserted values in a Vuex store?

I am working with a Vuex store that stores entries: const store = createStore({ state() { return { entries: [ { id: 1, date-of-birth: "2020-10-15T14:48:00.000Z", name: "Tom", }, ...

javascriptvue.jsvuex

Is there a way to differentiate between a browser application running on a local development server and an online staging server?

Is there a way to conditionally call a component only on the staging server and not on the local machine in Vue.js? <save-drafts-timer v-if="!environment === 'development'" /> ... data () { return { environment ...

javascriptnode.jsvue.js

Vue JS - Show the second option in the select menu once the first option is disabled

Can anyone assist me with displaying the second option in a select drop-down menu after the menu is disabled? The select menu will be disabled if there are only two options available. However, instead of showing the default 'Select nationality' ...

vue.js

Can csrf protection effectively secure data being posted to a server via axios?

In my current project, I am utilizing Laravel but it is not a Vue Single Page Application (SPA) so no routes are being used. Instead, the registration, login, and other form interactions are done through modals using Vue. Axios is being used to send form ...

laravelvue.jsaxios

Refresh a component by utilizing Vuex getters

I have been attempting to trigger a re-render of a component, and I came across the suggestion of using key to force the re-render. I decided to go with this approach, setting my key as a value fetched from the store. However, even after committing a mutat ...

vue.js

Is there a way to include a vertical scrollbar within the modal dialog using Vuetify components?

Here is an example of my code: <div id="app"> <v-app> <v-content> <v-container> <v-dialog v-for='foo, k in foos' :key='foo.id' :close-on-content-click="false" ...

vue.jsdatepickermodal-dialogvue-componentvuetify.js