useCssVars() — vue Function Reference

Architecture documentation for the useCssVars() function in useCssVars.ts from the vue codebase.

Function typescript VueCore GlobalAPI

Entity Profile

VueCore→ GlobalAPI→ useCssVars() — vue Function Reference

Dependency Diagram

graph TD
  e495ba1b_08d4_1d29_bbeb_8d4217bfcde1["useCssVars()"]
  9c7497a9_d0ae_4161_5b72_874880676aaa["useCssVars.ts"]
  e495ba1b_08d4_1d29_bbeb_8d4217bfcde1 -->|defined in| 9c7497a9_d0ae_4161_5b72_874880676aaa
  style e495ba1b_08d4_1d29_bbeb_8d4217bfcde1 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/v3/sfc-helpers/useCssVars.ts lines 9–34

export function useCssVars(
  getter: (
    vm: Record<string, any>,
    setupProxy: Record<string, any>
  ) => Record<string, string>
) {
  if (!inBrowser && !__TEST__) return

  const instance = currentInstance
  if (!instance) {
    __DEV__ &&
      warn(`useCssVars is called without current active component instance.`)
    return
  }

  watchPostEffect(() => {
    const el = instance.$el
    const vars = getter(instance, instance._setupProxy!)
    if (el && el.nodeType === 1) {
      const style = (el as HTMLElement).style
      for (const key in vars) {
        style.setProperty(`--${key}`, vars[key])
      }
    }
  })
}