vue-liquid-glass

Vue 3 Liquid Glass effect — Apple-style refractive glass via SVG filters and backdrop-filter.

Note: SVG filters as backdrop-filter only work in Chromium browsers. Safari and Firefox automatically fall back to blur(1rem).

Install

npm install vue-liquid-glass
# or
pnpm add vue-liquid-glass

Usage

Component

<template>
  <LiquidGlass
    :options="{ bezelWidth: 20, glassThickness: 1, refractiveIndex: 1.5 }"
    class="rounded-full p-4 glass-nav">
    <p>Your content here</p>
  </LiquidGlass>
</template>

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

<style scoped>
.glass-nav {
  background: rgba(255, 255, 255, 0.5);
  /* Fallback for non-Chromium browsers */
  backdrop-filter: blur(1rem);
}
</style>

Composable (advanced)

For custom layouts, use useLiquidGlass directly:

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

const { filterId, glassRef, dispUrl, specUrl, scale, filterWidth, filterHeight, isReady, isSupported, blurAmount } =
  useLiquidGlass({ bezelWidth: 20 })
</script>

Then wire up the SVG filter and backdrop-filter style yourself.

Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | bezelWidth | number | 20 | Width of the refractive bezel in pixels | | glassThickness | number | 0.8 | Thickness of the virtual glass surface | | refractiveIndex | number | 1.5 | Refractive index (glass = 1.5) | | specularOpacity | number | 0.4 | Specular highlight opacity (0–1) | | specularAngle | number | -60 | Light source angle in degrees | | specularPower | number | 6 | Specular sharpness exponent | | blurAmount | number | 0.5 | Gaussian blur after refraction (px) |

Vue 2 / Nuxt

For Nuxt 3+, components and composables are auto-imported if you configure the package in nuxt.config.ts:

export default defineNuxtConfig({
  modules: ['vue-liquid-glass/nuxt'], // if you add a Nuxt module
  // Or just import manually in your components
})

Or add to components/ and composables/ via a local copy.

License

MIT