Liquid Glass Vue

Choose between the Directive and the Component based on your layout requirements:

Use the Directive when:

• You want to apply the 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.

Use a Directive when:

• You want to apply the liquid glass effect to an existing element.
• You need more control over the DOM structure.
• You are dealing with complex layouts that might interfere with the component.
• You want to apply the effect to third-party components.

Use the Component when:

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

You can use the <LiquidGlass> component as a wrapper for any content. It provides the liquid glass visual effect to its children.

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>

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

<template>
  <LiquidGlass>
    <div class="p-6">
      <h2 class="p-6">您的内容在这里</h2>
      <p>这将拥有液体玻璃效果</p>
    </div>
  </LiquidGlass>
</template>

By default, the glass effect responds to mouse movement over the component itself. To make the effect respond to mouse movement over a larger area (like a parent container), pass a reference to that container via 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 class="text-white">Glass responds to mouse anywhere in the container</h2>
      </div>
    </LiquidGlass>
  </div>
</template>

To use the <LiquidGlass> component anywhere in your application without manual imports, register it as a plugin in your main entry file.

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

const app = createApp()

app.use(LiquidGlass)

Wrap your content with the <LiquidGlass> component to apply the glass effect. The component supports arbitrary child elements.

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

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

Install the package using npm to use the Apple-style liquid glass effects in your Vue 3 project.

npm install @wxperia/liquid-glass-vue

To use the <LiquidGlass> component throughout your entire application without manual imports, register it as a plugin in your main entry file.

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

const app = createApp()

app.use(LiquidGlass)

Install the package using npm to use Apple-style liquid glass effects in your Vue 3 project.

npm install @wxperia/liquid-glass-vue

You can install Liquid Glass Vue globally in your Vue application by using the default export's install method. This registers the LiquidGlass component globally, allowing you to use it anywhere in your application without manual imports.

import { createApp } from 'vue'
import LiquidGlassPlugin from '@wxperia/liquid-glass-vue'

const app = createApp(App)
app.use(LiquidGlassPlugin)
app.mount('#app')

The <LiquidGlass> component accepts several props to fine-tune the visual effect, including displacement, blur, saturation, and elasticity.

Example: Highly customized button

<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>

You can customize the visual properties of the glass effect using props such as displacementScale, blurAmount, saturation, and elasticity. For advanced shader effects, set the mode to 'shader' and choose an effect type.

<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>