So here is a common situation I was in recently. I am building a portal using NuxtJS, NodeJS & MongoDB stack and the requirement was to store design preferences for a specific user. So a user can log in and set up their profile text color, background color, button styles, etc. And the first question that popped into my mind was, how do I add all these styles dynamically in NuxtJS (or you can say VueJS)? There is a couple of solution, some of which can work and some don’t.
1. By binding style attribute
This is a very common method as you can dynamically bind any attributes to HTML tags in Vue JS. So doing something like the below would work nicely
<h1 :style="{ color: activeColor, fontSize: fontSize + 'px' }">Hello World</h1>
Nicely explained in official documentation. But there is one problem here, what if you want to apply styles like :hover, :nth-child, :active, :focus, etc? This solution will not work.
2. By adding <style> tag inside <template> tag
This method is actually wrong but for some reason it worked for me on my local machine and then after deploying, it didn’t 😂
<template>
... other code ...
<style>
h1{ color: {{activeColor}}, fontSize: {{fontSize}}px }
</style>
</template>
3. Using Dynamic component
VueJS has a nice feature to load components dynamically. This means you can simply write <component :is=”COMPONENT_NAME”> and the component with that name gets loaded. And we can make use of it to load <style> tags inside <template> tag. Something like this:
<template>
<h1>Hello World</h1>>
<component :is="'style'">
h1{ color: {{activeColor}}, fontSize: {{fontSize}}px }
</component>
</template>
Notice the :is=”‘style'”, here you can not write is=”style” directly as “is” always has to be bound to some component name. In our case style is an inbuilt HTML component, so we are simply passing it as a string and not as a component.
This method worked for me without any errors. But there is no official statement about this if we should use it this way or not. I found this solution from Vuejs forum . Make note the solution given on the forum doesn’t have the is bound which causes error. So :is should always be bound.