vue-liquid-glass

Vue 3 component and directive for creating stunning liquid glass effect using SVG filters and backdrop blur

🎨 Live Demo | 📦 npm | 🐙 GitHub

Installation

npm install @daisigu/vue-liquid-glass

yarn add @daisigu/vue-liquid-glass

pnpm add @daisigu/vue-liquid-glass

Component Usage

<template>
  <VGlass :blur="10" :scale="30" :base-frequency="0.015">
    <div class="content">
      <h1>Glass Effect</h1>
      <p>Beautiful liquid glass morphism</p>
    </div>
  </VGlass>
</template>

<script setup>
import { VGlass } from '@daisigu/vue-liquid-glass'
</script>

<style scoped>
.content {
  padding: 2rem;
  color: white;
}
</style>

Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | as | string | "div" | HTML tag for root element | | blur | number | 0 | CSS blur in pixels (backdrop-filter) | | scale | number | 20 | Displacement strength | | baseFrequency | number | 0.01 | Turbulence frequency | | xChannelSelector | "R" \| "G" \| "B" \| "A" | "R" | X axis color channel for displacement | | yChannelSelector | "R" \| "G" \| "B" \| "A" | "G" | Y axis color channel for displacement | | numOctaves | number | 2 | Turbulence detail level |

Directive Usage

Directive Installation

import { createApp } from 'vue'
import { vGlassDirective } from '@daisigu/vue-liquid-glass'

const app = createApp(App)
app.directive('liquid-glass', vGlassDirective)
app.mount('#app')

Directive Configuration

You can configure default values when creating the directive:

import { createApp } from 'vue'
import { createVGlassDirective } from '@daisigu/vue-liquid-glass'

const app = createApp(App)

// Create directive with custom default values
app.directive('liquid-glass', createVGlassDirective({
  blur: 10,
  scale: 30,
  baseFrequency: 0.015
}))

app.mount('#app')

Using the Directive

<template>
  <!-- Without parameters (uses default values) -->
  <div v-liquid-glass class="glass-card">
    <h2>Glass Card</h2>
  </div>

  <!-- With configuration object -->
  <div v-liquid-glass="{ blur: 15, scale: 40, baseFrequency: 0.02 }" class="glass-card">
    <h2>Custom Glass Card</h2>
  </div>
</template>

<style scoped>
.glass-card {
  padding: 2rem;
  color: white;
  border-radius: 12px;
}
</style>

Directive Parameters

| Parameter | Type | Default | Description | |-----------|------|---------|-------------| | blur | number | 2 | CSS blur in pixels | | scale | number | 40 | Displacement strength | | baseFrequency | number | 0.01 | Turbulence frequency | | xChannelSelector | "R" \| "G" \| "B" \| "A" | "R" | X axis color channel for displacement | | yChannelSelector | "R" \| "G" \| "B" \| "A" | "G" | Y axis color channel for displacement | | numOctaves | number | 2 | Turbulence detail level |

Links

• 🎨 Live Demo - Interactive demonstration
• 📦 npm Package - Install from npm
• 🐙 GitHub Repository - Source code and issues

Contributing

Contributions are welcome! Whether it's:

• 🐛 Reporting bugs
• 💡 Suggesting new features
• 📝 Improving documentation
• 🔧 Submitting pull requests

Please feel free to open an issue or submit a Pull Request on GitHub.

License

MIT