Quick start

Mesh Gradient supports Vue 3 and SSR frameworks like Nuxt.js via the @mesh-gradient/vue package.

Installation

npm install @mesh-gradient/vue

pnpm add @mesh-gradient/vue

yarn add @mesh-gradient/vue

bun add @mesh-gradient/vue

Usage

<template>
  <MeshGradient :style="{ width: '10rem', height: '10rem' }" />
</template>
 
<script setup lang="ts">
import { MeshGradient } from '@mesh-gradient/vue'
</script>

That’s it! You should see the result on the page:

Configure gradient

The mesh gradient can be configured by passing options prop.

<template>
  <MeshGradient :options="{ seed: 1 }" />
</template>

Changing options prop will update the gradient with new settings. <MeshGradient /> component supports smooth appearance and fade transitions between states out-of-the-box.