Liquid Glass Vue

Apple's Liquid Glass effect for Vue 3.

📝 Note: This Vue implementation is based on the original liquid-glass-react library. All core effects and algorithms have been adapted from the React version to work with Vue 3's Composition API.

中文

Card Example	Button Example

🎬 Demo

Click here to see it in action!

✨ Features

• Proper edgy bending and refraction
• Multiple refraction modes
• Configurable frosty level
• Supports arbitrary child elements
• Configurable paddings
• Correct hover and click effects
• Edges and highlights take on the underlying light like Apple's does
• Configurable chromatic aberration
• Configurable elasticity, to mimic Apple's "liquid" feel
• Full Vue 3 support with Composition API
• TypeScript support

⚠️ NOTE: Safari and Firefox only partially support the effect (displacement will not be visible)

🚀 Usage

Installation

npm install @wxperia/liquid-glass-vue

Global Usage

import LiquidGlass from 'liquid-glass-vue'
import { createApp } from 'vue'

const app = createApp()

app.use(LiquidGlass)

<script setup lang="ts"></script>

<template>
  <LiquidGlass>
    <div class="p-6">
      <h2>Global Use</h2>
      <p>This will have the liquid glass effect</p>
    </div>
  </LiquidGlass>
</template>

Basic Usage

<script setup lang="ts">
  import { LiquidGlass } from 'liquid-glass-vue'
</script>

<template>
  <LiquidGlass>
    <div class="p-6">
      <h2>Your content here</h2>
      <p>This will have the liquid glass effect</p>
    </div>
  </LiquidGlass>
</template>

Button Example

<script setup lang="ts">
  import { LiquidGlass } from '@wxperia/liquid-glass-vue'

  const handleClick = () => {
    console.log('Button clicked!')
  }
</script>

<template>
  <LiquidGlass
    :displacement-scale="64"
    :blur-amount="0.1"
    :saturation="130"
    :aberration-intensity="2"
    :elasticity="0.35"
    :corner-radius="100"
    padding="8px 16px"
    @click="handleClick"
    :effect="mosaicGlass"
    :mode="'shader'"
  >
    <span class="text-white font-medium">Click Me</span>
  </LiquidGlass>
</template>

Mouse Container Example

When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the mouseContainer prop:

<script setup lang="ts">
  import { ref } from 'vue'
  import { LiquidGlass } from 'liquid-glass-vue'

  const containerRef = ref<HTMLDivElement>()
</script>

<template>
  <div
    ref="containerRef"
    class="w-full h-screen bg-image"
  >
    <LiquidGlass
      :mouse-container="containerRef"
      :elasticity="0.3"
      :style="{ position: 'fixed', top: '50%', left: '50%' }"
    >
      <div class="p-6">
        <h2>Glass responds to mouse anywhere in the container</h2>
      </div>
    </LiquidGlass>
  </div>
</template>

Props

Prop	Type	Default	Description
displacementScale	number	70	Controls the intensity of the displacement effect
blurAmount	number	0.0625	Controls the blur/frosting level
saturation	number	140	Controls color saturation of the glass effect
aberrationIntensity	number	2	Controls chromatic aberration intensity
elasticity	number	0.15	Controls the "liquid" elastic feel (0 = rigid, higher = more elastic)
cornerRadius	number	999	Border radius in pixels
class	string	""	Additional CSS classes
padding	string	"24px 32px"	CSS padding value
style	CSSProperties	-	Additional inline styles
overLight	boolean	false	Whether the glass is over a light background
mouseContainer	Ref<HTMLElement>	null	Container element to track mouse movement on (defaults to the glass component itself)
mode	"standard" | "polar" | "prominent" | "shader"	"standard"	Refraction mode for different visual effects. shader is the most accurate but not the most stable.
globalMousePos	{ x: number; y: number }	-	Global mouse position coordinates for manual control
mouseOffset	{ x: number; y: number }	-	Mouse position offset for fine-tuning positioning
effect	"flowingLiquid" | "liquidGlass" | "transparentIce" | "unevenGlass" | "mosaicGlass"	"liquidGlass"	Shader effect type, only works when mode is "shader"

Events

Event	Type	Description
@click	() => void	Emitted when the glass component is clicked

Directive vs Component

Use the Directive when:

• You want to apply liquid glass effect to existing elements
• You need more control over the DOM structure
• You're working with complex layouts where components might interfere
• You want to apply the effect to third-party components

Use the Component when:

• You want a complete glass container solution
• You prefer the component-based approach
• You need the full feature set with minimal setup
• You're building new UI elements from scratch

Development

This Vue implementation maintains the same visual effects and behavior as the original React version while utilizing Vue 3's reactive system and Composition API for optimal performance.

Credits

• Original React implementation: liquid-glass-react by rdev
• Vue adaptation: Converted to Vue 3 with Composition API