Currently, I am in the process of developing a NuxtJS website where the pages and components can either have a generic design by default or be customizable based on client specifications provided in the URL.
The URL structure is as follows:
http://localhost:3000/registrationhttp://localhost:3000/client-name/registrationTo achieve this functionality, I have created a JSON configuration file for each client, such as client-name.json, which follows a specific structure outlined below:
{
"some_configuration_property": {},
"another_configuration_property": {},
"design": {
"logoUrl": "/assets/client-name/logo.png",
"backgroundColor": "#000000",
"primaryColor": "#ffffff",
"secondaryColor": "#ffff00"
},
}
I have successfully implemented the routing system to read the client's configuration based on the current route within the Vue file setup method using @nuxt/composition-api. However, I am currently facing an issue on how to pass these "design variables" into the <style> tag of my Vue file, which utilizes SCSS.
- Initially, I considered using CSS variables to create default values that could be overridden within styles. While this approach worked for individual components, I quickly realized that creating classes for each client would not be ideal due to maintainability concerns.
For example:
// Customizable component
.my-button {
color: (--button-color, teal);
}
// Styling from a parent component/view
v::deep {
div {
&.my-button {
--button-color: purple;
}
}
}
Although the
/deep/selector or::v-deeppseudo selector could be used, it may lead to messy code and decreased maintainability when styling components from parents.Another potential solution involves passing a variable, such as
classArray, within the setup method to dynamically bind CSS classes to DOM elements. Yet, creating a CSS class for each client with associated styles could prove cumbersome.
As seen here:
<template>
<my-button :class="classArray"></my-button>
</template>
<script lang="ts">
import { defineComponent } from '@nuxtjs/composition-api'
export default defineComponent({
name: 'MyPage',
setup() {
const clientName = 'someClientName';
const classArray = [clientName]
return { classArray };
},
})
</script>
<style lang="scss" scoped>
.someClientName {
// custom styles
}
</style>
What approach would you recommend in handling this situation?
Thank you for your assistance!