The SwiftUI Mesh Gradient abstraction for Vue
npm install @mesh-gradient/vueApple-inspired animated mesh gradient component for Vue applications. A Vue wrapper around the high-performance WebGL-powered mesh gradient library.
- 🔄 Smooth Animations - Hardware-accelerated WebGL transitions
- 🎨 Customizable Colors - Support for up to 4 colors simultaneously
- ⚡ Static Mode - Optimized mode for static gradients
- 📱 Responsive - Automatic pause when out of viewport
- 🚀 High Performance - WebGL hardware acceleration with smart optimizations
- 🛠️ TypeScript - Full type support out of the box
- 🔧 Vue 3 Ready - Built specifically for Vue 3 with Composition API
- 📦 Lightweight - Minimal bundle size impact
``bashpnpm (recommended)
pnpm add @mesh-gradient/vue
🚀 Quick Start
$3
vue
class="w-full h-64 rounded-lg"
/>
`$3
vue
ref="canvasRef"
class="w-full h-64 rounded-lg"
/>
`$3
vue
:isPaused="false"
class="w-full h-96 rounded-xl"
@init="onGradientInit"
@update="onGradientUpdate"
/>
`📖 API Reference
$3
#### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
|
| MeshGradientOptions | {} | Configuration options for the gradient |
| isPaused | boolean | false | Whether the animation is paused |#### Events
| Event | Parameters | Description |
|-------|------------|-------------|
|
init | (instance: MeshGradient) | Emitted when gradient is initialized |
| update | (instance: MeshGradient) | Emitted when gradient options are updated |$3
Returns a reactive reference to a MeshGradient instance with automatic cleanup.
`typescript
const { instance } = useMeshGradient();
`Documentation
Full documentation website available here.
⚠️ Important Notes
1. WebGL Requirement: This library requires WebGL support in the browser
2. Canvas Element: The component renders as a