@mizuui/liquid-glass-vue

mizuui-liquid-glass-vue

<LiquidGlass> for Vue 3. Wrap anything and it sits on a pane of real glass — the backdrop is refracted through a bevel, not blurred into frost.

npm install @mizuui/liquid-glass-vue

Usage

Per-component:

<script setup>
import { LiquidGlass } from "@mizuui/liquid-glass-vue";
</script>

<template>
  <LiquidGlass :radius="28" :strength="80">
    <h1>Anything in here sits on glass</h1>
  </LiquidGlass>
</template>

Or register it globally so the tag is available everywhere:

import { createApp } from "vue";
import LiquidGlassPlugin from "@mizuui/liquid-glass-vue";

createApp(App).use(LiquidGlassPlugin).mount("#app");

Props

All mizuui-liquid-glass-core options are exposed as props: radius, depth, strength, falloff, chromaticAberration, blur, saturation, brightness, specular, resolution, fallbackBlur.

as changes the rendered tag (default div).

The effect needs something behind it to bend, and the element sizes itself from its content — give it padding and a width like any other element.

Related packages

• @mizuui/liquid-glass-core — framework-agnostic rendering engine
• @mizuui/liquid-glass-react — <LiquidGlass> for React

Development

This package is part of the Liquid Glass monorepo. See BUILDING.md for how to build from source and PUBLISHING.md for the release process.

License

MIT © MizuUI