Vue Use Utilities

# useCssVars

useCssVars

Munipulate CSS Variables.

# Example

💡 Change Color and Watch CSS Variables Changed.

# Usage

import { ref } from 'vue-demi'
import { useCssVars } from '@vueblocks/vue-use-core'

export default {
  setup () {
    const textEl = ref(null)
    const onInputTextColor = e => textColor.value = e.target.value
    const onInputBgColor = e => bgColor.value = e.target.value
    
    const textColor = useCssVars(textEl, '--text-color', '#000')
    const bgColor = useCssVars(textEl, '--bg-color', '#3eaf7c')

    return {
      textEl,
      textColor,
      bgColor,
      onInputTextColor,
      onInputBgColor
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Typing

declare const useCssVars: (
  el: MaybeRef<HTMLElement | null>,
  variable: string,
  defaultValue: string
) => Ref<string>;
1
2
3
4
5

← useDebouncedRef →