VueCraft NPM

Vue ​

All hooks return a ComputedRef<string> that reacts to Ref<> inputs. All hooks are SSR-safe — no DOM access occurs during computation. Imported from css-magic-gradient/vue — this is the only entry point that requires vue; the core package never does.

Setup ​

ts
// main.ts
import { createApp } from 'vue'
import { VueGradientPlugin } from 'css-magic-gradient/vue'
import App from './App.vue'

createApp(App).use(VueGradientPlugin).mount('#app')

Example ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import {
  useLinearGradient,
  useMixedLinearGradient,
  useConicGradient,
  useTetradicGradient,
  useTintGradient,
  useAccessibleGradient,
} from 'css-magic-gradient/vue'

const color = ref('#3498db')

const linear = useLinearGradient(color, { direction: 'to right', offsetPercent: 20 })
const mixed = useMixedLinearGradient(color, ref('#e74c3c'), 7)
const conic = useConicGradient(color, { hueRotation: true, steps: 12 })
const tetradic = useTetradicGradient(color, { type: 'conic', steps: 24 })
const tint = useTintGradient(color, 7)
const accessible = useAccessibleGradient(color, ref('#ffffff'), { targetLevel: 'AA' })
</script>

<template>
  <div :style="{ background: linear }">Linear</div>
  <div :style="{ background: tetradic }">Tetradic conic</div>
  <div :style="{ background: tint }">Tint</div>
  <div :style="{ background: accessible }">Accessible</div>
</template>

Hooks ​

useLinearGradient(first, options?) ​

ComputedRef<string> — linear gradient from color or stops.

useMultiStepLinearGradient(color, steps?, options?) ​

ComputedRef<string> — multi-stop brightness gradient.

useMixedLinearGradient(colorA, colorB, steps?, options?) ​

ComputedRef<string> — HSL-interpolated two-color gradient.

useRadialGradient(color, options?) ​

ComputedRef<string> — radial gradient.

useConicGradient(color, options?) ​

ComputedRef<string> — conic gradient.

useRainbowConicGradient(options?) ​

ComputedRef<string> — full-spectrum rainbow conic.

useComplementaryGradient(color, options?) ​

ComputedRef<string> — complementary harmony gradient.

useTriadicGradient(color, options?) ​

ComputedRef<string> — triadic harmony gradient.

useAnalogousGradient(color, options?) ​

ComputedRef<string> — analogous harmony gradient.

useTetradicGradient(color, options?) ​

ComputedRef<string> — tetradic harmony gradient (linear/radial/conic).

useSplitComplementaryGradient(color, options?) ​

ComputedRef<string> — split-complementary harmony gradient.

useTintGradient(color, steps?, options?) ​

ComputedRef<string> — tint gradient (base → white).

useShadeGradient(color, steps?, options?) ​

ComputedRef<string> — shade gradient (base → black).

useToneGradient(color, steps?, options?) ​

ComputedRef<string> — tone gradient (base → gray).

useAccessibleGradient(color, textColor, options?) ​

ComputedRef<string> — auto-adjusted WCAG-compliant gradient.

Global properties (after VueGradientPlugin install) ​

ts
this.$useLinearGradient(color, options)
this.$useTetradicGradient(color, options)
this.$useTintGradient(color, steps, options)
this.$useAccessibleGradient(color, textColor, options)
// … all hooks available as $use* on the Vue instance