vue-liquid-glass

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

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

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