Liquid Glass Vue Components

Professional liquid glass Vue components featuring Apple's signature frosted glass effects. Create stunning Vue applications with dynamic refraction, edge bending, and customizable blur using our liquid glass Vue library.

Get Started View on GitHub

Liquid Glass Vue Examples

Experience the beauty and versatility of liquid glass Vue components in action

Liquid Glass Vue Card Components - Glass Effect Examples

Glass Card Component

Elegant Vue components with translucent glass effects, perfect for modern dashboards and social applications.

Liquid Glass Vue Button Components - Interactive Glass Effects

Glass Button Styles

Minimalist glass buttons implemented with Vue directives, providing subtle yet engaging interactions.

Liquid Glass Vue Interactive Demo - Real-time Parameter Controls

Interactive Controls

Real-time parameter adjustments using Vue's reactive system for displacement, blur, and effects.

Liquid Glass Vue Features

Comprehensive liquid glass Vue capabilities that bring Apple's design vision to your Vue applications

🔄 Proper Edge Bending & Refraction

Our liquid glass Vue components accurately simulate light bending at glass edges, creating realistic depth and dimension that matches Apple's implementation in Vue applications.

🎯 Multiple Refraction Modes

Liquid glass Vue offers four refraction modes - standard, polar, prominent, and shader. Switch modes dynamically using Vue props to match your design aesthetic.

❄️ Configurable Frosty Level

Fine-tune the frost effect in your liquid glass Vue components from crystal clear to heavily frosted using simple Vue props, adapting to different content visibility needs.

🟢 Composition API Integration

Use composables to manage liquid glass Vue state effortlessly. Integrates perfectly with reactive and ref for dynamic effects, and Vue 3's lifecycle hooks for advanced control.

📦 Vue Directives Support

Liquid glass Vue includes custom directives like v-liquid-glass for simplified template syntax. Apply glass effects declaratively with full reactive binding support.

⚡ Vue DevTools Compatible

Debug liquid glass Vue components in Vue DevTools with full visibility into reactive state. Track performance metrics and optimize your glass effects in real-time.

Install Liquid Glass Vue

Get started with liquid glass Vue components in minutes

Using npm

npm install liquid-glass-vue

Using yarn

yarn add liquid-glass-vue

Vue 3 & TypeScript Support

Liquid Glass Vue comes with built-in TypeScript declarations and full Vue 3 support, providing excellent developer experience with IntelliSense and type safety.

Liquid Glass Vue Usage Examples

Learn how to implement liquid glass Vue components in your applications

Basic Usage

<template>
  <LiquidGlass>
    <div class="p-8">
      Your content here
    </div>
  </LiquidGlass>
</template>

<script setup>
import { LiquidGlass } from 'liquid-glass-vue'
</script>

Advanced Configuration

<template>
  <LiquidGlass
    :displacement-scale="100"
    :blur-amount="0.08"
    :saturation="180"
    :elasticity="0.2"
    mode="prominent"
    :corner-radius="24"
    class="custom-glass"
  >
    <Card title="Premium Content">
      <p>This card has enhanced glass effects</p>
    </Card>
  </LiquidGlass>
</template>

Different Modes

<!-- Standard mode - balanced effect -->
<LiquidGlass mode="standard">
  <Content />
</LiquidGlass>

<!-- Polar mode - circular distortion -->
<LiquidGlass mode="polar">
  <Content />
</LiquidGlass>

<!-- Prominent mode - stronger refraction -->
<LiquidGlass mode="prominent">
  <Content />
</LiquidGlass>

<!-- Shader mode - custom shader effects -->
<LiquidGlass mode="shader">
  <Content />
</LiquidGlass>

Liquid Glass Vue Props API

Complete liquid glass Vue components reference with all available props and configurations

Prop	Type	Default	Description
`default slot*`	`VNode`	`-`	The content to be wrapped with the liquid glass effect
`displacement-scale`	`number`	`70`	Controls the intensity of the displacement effect
`blur-amount`	`number`	`0.0625`	Adjusts the blur/frosting level of the glass effect
`saturation`	`number`	`140`	Color saturation percentage
`elasticity`	`number`	`0.15`	Controls the "liquid" feel and elasticity of the effect
`corner-radius`	`number`	`999`	Border radius in pixels
`mode`	`"standard" \| "polar" \| "prominent" \| "shader"`	`"standard"`	Refraction mode that determines the visual style
`class`	`string`	`-`	Additional CSS classes for styling
`style`	`object`	`-`	Inline styles for the component

Browser Compatibility

Support across modern browsers with graceful fallbacks

Browser	Support Level	Notes
Chrome / Edge	Full Support	All effects work perfectly
Safari	Partial Support	Displacement effects may not be visible
Firefox	Partial Support	Displacement effects may not be visible

Note: The library includes automatic fallbacks for unsupported features, ensuring a good user experience across all browsers.

Liquid Glass Vue FAQ

Common questions about implementing liquid glass Vue components

Yes! Liquid glass vue works perfectly with Nuxt 3 and the entire Vue ecosystem. Since liquid glass vue uses client-side effects, you may need to wrap the component with <ClientOnly> in some cases.

Liquid glass vue integrates seamlessly with:

Nuxt 3: Full compatibility with SSR and hydration
Vue Router: Works with route transitions
TypeScript: Built-in type definitions for excellent developer experience

Liquid glass vue components respond beautifully to prop changes, making animations smooth and performant:

Using Vue Reactivity:

const blur = ref(0.06)
<LiquidGlass :blur-amount="blur">Content</LiquidGlass>

Popular Vue Animation Libraries:

Vue Transitions: Built-in transition system for liquid glass vue
VueUse Motion: Declarative animations for liquid glass vue parameters
GSAP: Advanced timeline animations for liquid glass vue

All liquid glass vue props can be animated in real-time.

Liquid glass vue is optimized for excellent performance in Vue applications:

GPU-accelerated rendering: Uses hardware-accelerated SVG filters
Vue-optimized: Efficient reactive updates and re-rendering
Minimal bundle size: Lightweight liquid glass vue library
Memory efficient: Proper Vue cleanup and lifecycle management

For optimal performance, limit to 3-5 liquid glass vue components per page. Use Vue's computed and watch for expensive prop calculations.

Liquid glass vue provides several Vue-specific optimization strategies for mobile:

Using Vue Composition API:

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)
<LiquidGlass
  :displacement-scale="isMobile ? 30 : 70"
  :blur-amount="isMobile ? 0.03 : 0.06"
>

Vue Performance Tips:

Use v-memo to prevent unnecessary re-renders
Implement conditional rendering with v-if based on device capabilities
Leverage Vue's onMounted for device-specific optimizations

Liquid glass vue is built specifically for Vue 3 and the Composition API. However, we provide limited Vue 2 compatibility:

Vue 2.7+: Works with the Composition API plugin
Options API: Basic support through compatibility wrappers
Migration Path: Easy upgrade from Vue 2 to Vue 3

For the best experience and full feature support, we recommend using liquid glass vue with Vue 3.

Liquid glass vue has excellent cross-browser compatibility with Vue applications:

Chrome, Edge, Safari: Full liquid glass vue feature support with optimal performance
Firefox: Most liquid glass vue effects supported with minor limitations on displacement mapping
Older browsers: Automatic fallbacks ensure graceful degradation

Our liquid glass vue library automatically detects browser capabilities and adjusts rendering accordingly. All Vue 3 features like Composition API, Teleport, and Suspense work perfectly across supported browsers.

Liquid Glass Vue Resources

Everything you need to master liquid glass Vue components and effects

GitHub Repository

Source code, issues, and contributions. Star the repo to show your support!

Live Demo

Interactive playground to experiment with all parameters and see results in real-time

NPM Package

Package details, version history, and download statistics

API Documentation

Comprehensive API reference with detailed examples and best practices

Ready to Add Glass Effects to Your Vue App?

Start building beautiful, Apple-inspired interfaces with liquid glass effects today

Get Started Try Live Demo