-1

Im fetching colors from backend from vuex store, and i need to set that colors to css variables. And this variables need to be aviable on every page. how i can do that?

  • Does this answer your question? [Vue.js dynamic – Estus Flask Mar 11 '22 at 09:24
  • Please make an effort with your question, it's unclear what you've tried so far and what is the end goal. Also, did you tried CSS variables? If you're using "CSS variables" aka [custom properties](https://developer.mozilla.org/en-US/docs/Web/CSS/--*), you don't even need to do it in every layout because you will have it set globally in your CSSOM (global scope). – kissu Mar 12 '22 at 16:07

1 Answers1

0

Assume you load the color settings on nuxtServerInit action in Vuex (ref), and the format is:

{
  primary: '#F00',
  secondary: '#000'
}

By layouts

You can bind those variables as inline styles (ref) to the root element of your layout (ref), for example, layouts/default.vue:

<template>
  <div :style="styles">
    <nuxt />
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'colorsFromBackend'
    ]),
    styles () {
      const obj = {}
      for (const key in this.colorsFromBackend) {
        obj[`--${key}`] = this.colorsFromBackend[key]
      }
      return obj
    }
  }
}
</script>

Then you can use the variables under the layout:

<template>
  <div class="demo">CSS Variable Testing</div>
</template>

<style scoped>
.demo {
  color: var(--primary);
  background: var(--secondary);
}
</style>

Here is a live demo: https://codesandbox.io/s/css-variable-with-nuxt-js-7lp9t4

By plugins

Alternatively, if you want to use the variables globally, you can done this by inserting a style tag to <head> through a Nuxt plugin (ref), the plugin will be executed in client only before rendering Vue components (ref).

First, add the plugin configuration in nuxt.config.js:

export default {
  // ...
  plugins: [
    {
      src: '~/plugins/css-var.js',
      mode: 'client' // Important for running in client side only
    }
  ]
}

Then, add the plugin file css-var.js under plugins/ directory:

export default ({ app, store }) => {
  // Fetch the color object from Vuex
  const colorsFromBackend = store.state.colorsFromBackend
  // Set the css content
  let styleContent = ''
  for (const key in colorsFromBackend) {
    styleContent += `--${key}: ${colorsFromBackend[key]};`
  }

  // Create a style tag
  const style = document.createElement('style')
  style.id = 'css-var'
  style.innerText = `:root{${styleContent}}`
  // Append the tag to the end of `head`
  document.head.appendChild(style)
}

With this approach, the css variables will be declared within :root, which points to <html> (ref), so you can access the css variables everywhere in the app.

Live demo: https://codesandbox.io/s/css-variable-with-nuxt-js-plugin-enjkri

Lay
  • 356
  • 2
  • 11
  • Can i do something from store? i Have 7 different layouts, and write this in every layout is hardcode –  Mar 11 '22 at 09:49
  • @EugenyVenegrad You can move the functionality of `styles` to a store getter or util, then just mapGetter that to the layouts – UdithIshara Mar 11 '22 at 14:05
  • Or you can use Nuxt plugin to declare them globally, I've edited my answer above. – Lay Mar 12 '22 at 16:52