Quick Start (Vue)
Set up Mesh Gradient in a Vue app with minimal configuration.
Quick start
Mesh Gradient supports Vue 3 and SSR frameworks like Nuxt.js via the @mesh-gradient/vue package.
Installation
npm install @mesh-gradient/vueUsage
<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:
Sizing: bind :style, class, or parent layout so the canvas is not sized only by framebuffer attributes. See Canvas layout & HiDPI.
Note: By default, colors and seed (initial pattern) of the gradient are generated randomly.
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.
Prefer a stable reference for options (e.g. ref, reactive, or computed) instead of an inline object literal when the parent re-renders often — otherwise Vue may pass a new object each render and trigger extra updates (deep watcher still guards identical JSON).
You can generate code for config by using Playground interface or explore all available options in the API section.