Nuxt.js: Dynamic Styling

[zsid]

What problem does this feature solve?

I would like to allow users to modify some parts of the css styling and make it dynamic - i.e. fetch a json from the api and past it to the component. That is pretty much the same how styled-components allow theming by passing a json to the theme provider where each component can get the required information

Use case:

1. Have one web app which fetches the required styling from an api
2. Consume the styling and pass it down to each components
3. The components can consume the required styling

What does the proposed changes look like?

How styled-components handles theming - https://www.styled-components.com/docs/advanced

_{This feature request is available on Nuxt community (#c9467)}

[koresar]

This is how I approach the feature.

My store has the "theme" substore (aka module). I extend the Vue prototype with theme state: Vue.prototype.$theme = store.state.theme.

Then I use the theme globally in my templates:

<button class="rounded px-2" :class="$theme.main" />

Of course the store.state.theme is a dynamic data. As soon as it changes (I assign any new JSON data to it) the entire UI redraws as needed.

// store/theme.js
state.main = "border-red";