{"_id":"@daisigu/vue-liquid-glass","_rev":"5-9eb30577d8b68556b930e5fec91e46f1","name":"@daisigu/vue-liquid-glass","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@daisigu/vue-liquid-glass","version":"1.0.0","keywords":["vue","vue3","liquid","glass","svg","displacement","filter","liquid glass","vue-liquid-glass","glassmorphism","morphism","backdrop-filter","component"],"author":{"name":"Daisigu"},"license":"MIT","_id":"@daisigu/vue-liquid-glass@1.0.0","maintainers":[{"name":"daisigu","email":"bogd2288@gmail.com"}],"homepage":"https://github.com/Daisigu/vue-liquid-glass","bugs":{"url":"https://github.com/Daisigu/vue-liquid-glass/issues"},"dist":{"shasum":"3b9deebd0d6f02af5a7cbcb6a0c53fe75e0d87e4","tarball":"https://registry.npmjs.org/@daisigu/vue-liquid-glass/-/vue-liquid-glass-1.0.0.tgz","fileCount":5,"integrity":"sha512-4oNmAw0ItGXhAy6HIsNLZRXB4FLicorVEjpUB4IXAXz95FYxvlSz2VV8RIqs8ZwaNJA5aqS+jKAeoUWQOs04Vg==","signatures":[{"sig":"MEUCIDhfZ/WzA3S2PlBwxlawHF2RrIdHAq1uRtTlpAPw+TTsAiEA2Jne6Lb//k28K8sdIhlAu/mPZqba9xacyb2bLWcat/A=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11416},"main":"./dist/vglass.umd.js","type":"module","types":"./dist/vglass.es.d.ts","module":"./dist/vglass.es.js","exports":{".":{"import":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.es.js"},"require":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.umd.js"}}},"gitHead":"9db53a397371c32212b22add88ac62a42c78446a","scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"daisigu","email":"bogd2288@gmail.com"},"repository":{"url":"git+https://github.com/Daisigu/vue-liquid-glass.git","type":"git"},"_npmVersion":"10.9.3","description":"A beautiful Vue 3 component that creates a stunning liquid glass morphism effect using SVG filters and backdrop blur","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.24","vite":"^7.2.4","vue-tsc":"^3.1.4","typescript":"~5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-liquid-glass_1.0.0_1764870015659_0.8898920390053835","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@daisigu/vue-liquid-glass","version":"1.0.1","keywords":["vue","vue3","liquid","glass","svg","displacement","filter","liquid glass","vue-liquid-glass","glassmorphism","morphism","backdrop-filter","component"],"author":{"name":"Daisigu"},"license":"MIT","_id":"@daisigu/vue-liquid-glass@1.0.1","maintainers":[{"name":"daisigu","email":"bogd2288@gmail.com"}],"homepage":"https://github.com/Daisigu/vue-liquid-glass","bugs":{"url":"https://github.com/Daisigu/vue-liquid-glass/issues"},"dist":{"shasum":"8ae32e56918b931da993fa361223f6e7f949fe52","tarball":"https://registry.npmjs.org/@daisigu/vue-liquid-glass/-/vue-liquid-glass-1.0.1.tgz","fileCount":5,"integrity":"sha512-o/vB3Scm+mfpD0KVGgYkjo+on7NvXtc4WHEDFsQL3XLHMm9TSrD5CQvh5DXmi9fSNJ6+Z/VwtV2EWCTBGBqO7g==","signatures":[{"sig":"MEQCIDotaXdxbGpl0i2r/E4txuR8PmhfDQgivZjnBc1lSi51AiBOg7J3QtjMdmrcV0pUGQhHLPPM0QjucbqXAouvZ0PRTQ==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11479},"main":"./dist/vglass.umd.js","type":"module","types":"./dist/vglass.es.d.ts","module":"./dist/vglass.es.js","exports":{".":{"import":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.es.js"},"require":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.umd.js"}}},"gitHead":"20b2da002c8e97fd731489141c1d309611d77c91","scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"daisigu","email":"bogd2288@gmail.com"},"repository":{"url":"git+https://github.com/Daisigu/vue-liquid-glass.git","type":"git"},"_npmVersion":"10.9.3","description":"A beautiful Vue 3 component that creates a stunning liquid glass morphism effect using SVG filters and backdrop blur","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.24","vite":"^7.2.4","vue-tsc":"^3.1.4","typescript":"~5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-liquid-glass_1.0.1_1764871330083_0.21632698077613877","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@daisigu/vue-liquid-glass","version":"1.0.2","keywords":["vue","vue3","liquid","glass","svg","displacement","filter","liquid glass","vue-liquid-glass","glassmorphism","morphism","backdrop-filter","component"],"author":{"name":"Daisigu"},"license":"MIT","_id":"@daisigu/vue-liquid-glass@1.0.2","maintainers":[{"name":"daisigu","email":"bogd2288@gmail.com"}],"homepage":"https://github.com/Daisigu/vue-liquid-glass","bugs":{"url":"https://github.com/Daisigu/vue-liquid-glass/issues"},"dist":{"shasum":"085bdd0fd1470c7896f2cc080060dfbae39b363d","tarball":"https://registry.npmjs.org/@daisigu/vue-liquid-glass/-/vue-liquid-glass-1.0.2.tgz","fileCount":5,"integrity":"sha512-NSLtXjOrtRQcFGK1jKb6GOkRMblAPY5dofnZr1dodDwZ5NMAZxJYJGw5sJ7dmOG3Xlr5zBHSMd1tTA+Ijcf0Mw==","signatures":[{"sig":"MEYCIQDqzGVhszgV2H5S6Ab9JXiPItklMu19hz7METuxJVTSbAIhAOpV68V3iQ8S8pMR+KNPO7ek53Sup0vhNRhoFWrMzm+O","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15650},"main":"./dist/vglass.umd.js","type":"module","types":"./dist/vglass.es.d.ts","module":"./dist/vglass.es.js","exports":{".":{"import":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.es.js"},"require":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.umd.js"}}},"gitHead":"53296594cc89639a47128ee6afc3a069c74bdf47","scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"daisigu","email":"bogd2288@gmail.com"},"repository":{"url":"git+https://github.com/Daisigu/vue-liquid-glass.git","type":"git"},"_npmVersion":"10.9.3","description":"A beautiful Vue 3 component that creates a stunning liquid glass morphism effect using SVG filters and backdrop blur","directories":{},"sideEffects":false,"_nodeVersion":"22.20.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.24","vite":"^7.2.4","vue-tsc":"^3.1.4","typescript":"~5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-liquid-glass_1.0.2_1764929255313_0.7699515139072215","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@daisigu/vue-liquid-glass","version":"1.0.3","keywords":["vue","vue3","liquid","glass","svg","displacement","filter","liquid glass","vue-liquid-glass","glassmorphism","morphism","backdrop-filter","component"],"author":{"name":"Daisigu"},"license":"MIT","_id":"@daisigu/vue-liquid-glass@1.0.3","maintainers":[{"name":"daisigu","email":"bogd2288@gmail.com"}],"homepage":"https://github.com/Daisigu/vue-liquid-glass","bugs":{"url":"https://github.com/Daisigu/vue-liquid-glass/issues"},"dist":{"shasum":"dd433eed8beda2c50272848618329f616b2f7b02","tarball":"https://registry.npmjs.org/@daisigu/vue-liquid-glass/-/vue-liquid-glass-1.0.3.tgz","fileCount":5,"integrity":"sha512-G4rDk+GpwbW9bYD3E5ZSbLiqn/9L9xtkmFYDiXZEtGKUOpZAnVehhDB9SyCuTGwR6fQgib4V91D/PdJdWwmPYA==","signatures":[{"sig":"MEYCIQDT2SenvZlvAvlCUfx76NgDOE0PXzHP22c2+O6cl2nbnQIhAPahQKiGn9qt5HA0uWHzRWT8i3gnTDA9Tw4+DG013ytt","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":21975},"main":"./dist/vglass.umd.js","type":"module","types":"./dist/vglass.es.d.ts","module":"./dist/vglass.es.js","exports":{".":{"import":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.es.js"},"require":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.umd.js"}}},"gitHead":"a25e2266016cd4e84e905dfad84d84d68548cb4a","scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"_npmUser":{"name":"daisigu","email":"bogd2288@gmail.com"},"repository":{"url":"git+https://github.com/Daisigu/vue-liquid-glass.git","type":"git"},"_npmVersion":"11.6.2","description":"A beautiful Vue 3 component that creates a stunning liquid glass morphism effect using SVG filters and backdrop blur","directories":{},"sideEffects":false,"_nodeVersion":"24.12.0","_hasShrinkwrap":false,"devDependencies":{"vue":"^3.5.24","vite":"^7.2.4","vue-tsc":"^3.1.4","typescript":"~5.9.3","@types/node":"^24.10.1","@vue/tsconfig":"^0.8.1","vite-plugin-dts":"^4.5.4","@vitejs/plugin-vue":"^6.0.1"},"peerDependencies":{"vue":"^3.0.0"},"_npmOperationalInternal":{"tmp":"tmp/vue-liquid-glass_1.0.3_1769237087302_0.4845002031691177","host":"s3://npm-registry-packages-npm-production"}},"1.0.4":{"name":"@daisigu/vue-liquid-glass","description":"A beautiful Vue 3 component that creates a stunning liquid glass morphism effect using SVG filters and backdrop blur","version":"1.0.4","type":"module","main":"./dist/vglass.umd.js","module":"./dist/vglass.es.js","types":"./dist/vglass.es.d.ts","exports":{".":{"import":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.es.js"},"require":{"types":"./dist/vglass.es.d.ts","default":"./dist/vglass.umd.js"}}},"sideEffects":false,"keywords":["vue","vue3","liquid","glass","svg","displacement","filter","liquid glass","vue-liquid-glass","glassmorphism","morphism","backdrop-filter","component"],"author":{"name":"Daisigu"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/Daisigu/vue-liquid-glass.git"},"homepage":"https://github.com/Daisigu/vue-liquid-glass","bugs":{"url":"https://github.com/Daisigu/vue-liquid-glass/issues"},"scripts":{"dev":"vite","build":"vue-tsc -b && vite build","preview":"vite preview"},"peerDependencies":{"vue":"^3.0.0"},"devDependencies":{"@types/node":"^24.10.1","@vitejs/plugin-vue":"^6.0.1","@vue/tsconfig":"^0.8.1","typescript":"~5.9.3","vite":"^7.2.4","vite-plugin-dts":"^4.5.4","vue":"^3.5.24","vue-tsc":"^3.1.4"},"gitHead":"a9ea7d997894f6ebe2b1b19fa8f6ab400760674d","_id":"@daisigu/vue-liquid-glass@1.0.4","_nodeVersion":"24.12.0","_npmVersion":"11.6.2","dist":{"integrity":"sha512-HkaRDcKEUrBOJbljS98AYm1Gm3QI4T6PLRZ72eConNXDFSisvApMNX92JlPw0/Idje2KV5Fy0vGy0p3D9MhegA==","shasum":"f66773d4806107c7e78ef40a3372a6cf157e5381","tarball":"https://registry.npmjs.org/@daisigu/vue-liquid-glass/-/vue-liquid-glass-1.0.4.tgz","fileCount":5,"unpackedSize":21868,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG+bzRgGnnTZo1XoIYXK3xaKI28WObrIwLwUKWH7UbVMAiAZ+/9BXsVuLwBCNRrv/vSEvEAIS18WnC8Uy1tIVElrZA=="}]},"_npmUser":{"name":"daisigu","email":"bogd2288@gmail.com"},"directories":{},"maintainers":[{"name":"daisigu","email":"bogd2288@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vue-liquid-glass_1.0.4_1771741516463_0.6021855625761383"},"_hasShrinkwrap":false}},"time":{"created":"2025-12-04T17:40:15.531Z","modified":"2026-02-22T06:25:16.717Z","1.0.0":"2025-12-04T17:40:15.811Z","1.0.1":"2025-12-04T18:02:10.219Z","1.0.2":"2025-12-05T10:07:35.490Z","1.0.3":"2026-01-24T06:44:47.439Z","1.0.4":"2026-02-22T06:25:16.605Z"},"bugs":{"url":"https://github.com/Daisigu/vue-liquid-glass/issues"},"author":{"name":"Daisigu"},"license":"MIT","homepage":"https://github.com/Daisigu/vue-liquid-glass","keywords":["vue","vue3","liquid","glass","svg","displacement","filter","liquid glass","vue-liquid-glass","glassmorphism","morphism","backdrop-filter","component"],"repository":{"type":"git","url":"git+https://github.com/Daisigu/vue-liquid-glass.git"},"description":"A beautiful Vue 3 component that creates a stunning liquid glass morphism effect using SVG filters and backdrop blur","maintainers":[{"name":"daisigu","email":"bogd2288@gmail.com"}],"readme":"# vue-liquid-glass\n\n<div align=\"center\">\n\n**Vue 3 component and directive for creating stunning liquid glass effect using SVG filters and backdrop blur**\n\n[![npm version](https://img.shields.io/npm/v/@daisigu/vue-liquid-glass.svg)](https://www.npmjs.com/package/@daisigu/vue-liquid-glass)\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![Vue 3](https://img.shields.io/badge/Vue-3-4FC08D?logo=vue.js)](https://vuejs.org/)\n\n**[🎨 Live Demo](https://vue-liquid-glass.netlify.app/)** | **[📦 npm](https://www.npmjs.com/package/@daisigu/vue-liquid-glass)** | **[🐙 GitHub](https://github.com/Daisigu/vue-liquid-glass)**\n\n</div>\n\n![Demo](demo-gif.gif)\n\n## Installation\n\n```bash\nnpm install @daisigu/vue-liquid-glass\n```\n\n```bash\nyarn add @daisigu/vue-liquid-glass\n```\n\n```bash\npnpm add @daisigu/vue-liquid-glass\n```\n\n## Component Usage\n\n```vue\n<template>\n  <VGlass :blur=\"10\" :scale=\"30\" :base-frequency=\"0.015\">\n    <div class=\"content\">\n      <h1>Glass Effect</h1>\n      <p>Beautiful liquid glass morphism</p>\n    </div>\n  </VGlass>\n</template>\n\n<script setup>\nimport { VGlass } from '@daisigu/vue-liquid-glass'\n</script>\n\n<style scoped>\n.content {\n  padding: 2rem;\n  color: white;\n}\n</style>\n```\n\n### Component Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `as` | `string` | `\"div\"` | HTML tag for root element |\n| `blur` | `number` | `0` | CSS blur in pixels (backdrop-filter) |\n| `scale` | `number` | `20` | Displacement strength |\n| `baseFrequency` | `number` | `0.01` | Turbulence frequency |\n| `xChannelSelector` | `\"R\" \\| \"G\" \\| \"B\" \\| \"A\"` | `\"R\"` | X axis color channel for displacement |\n| `yChannelSelector` | `\"R\" \\| \"G\" \\| \"B\" \\| \"A\"` | `\"G\"` | Y axis color channel for displacement |\n| `numOctaves` | `number` | `2` | Turbulence detail level |\n\n## Directive Usage\n\n### Directive Installation\n\n```javascript\nimport { createApp } from 'vue'\nimport { vGlassDirective } from '@daisigu/vue-liquid-glass'\n\nconst app = createApp(App)\napp.directive('liquid-glass', vGlassDirective)\napp.mount('#app')\n```\n\n### Directive Configuration\n\nYou can configure default values when creating the directive:\n\n```javascript\nimport { createApp } from 'vue'\nimport { createVGlassDirective } from '@daisigu/vue-liquid-glass'\n\nconst app = createApp(App)\n\n// Create directive with custom default values\napp.directive('liquid-glass', createVGlassDirective({\n  blur: 10,\n  scale: 30,\n  baseFrequency: 0.015\n}))\n\napp.mount('#app')\n```\n\n### Using the Directive\n\n```vue\n<template>\n  <!-- Without parameters (uses default values) -->\n  <div v-liquid-glass class=\"glass-card\">\n    <h2>Glass Card</h2>\n  </div>\n\n  <!-- With configuration object -->\n  <div v-liquid-glass=\"{ blur: 15, scale: 40, baseFrequency: 0.02 }\" class=\"glass-card\">\n    <h2>Custom Glass Card</h2>\n  </div>\n</template>\n\n<style scoped>\n.glass-card {\n  padding: 2rem;\n  color: white;\n  border-radius: 12px;\n}\n</style>\n```\n\n### Directive Parameters\n\n| Parameter | Type | Default | Description |\n|-----------|------|---------|-------------|\n| `blur` | `number` | `2` | CSS blur in pixels |\n| `scale` | `number` | `40` | Displacement strength |\n| `baseFrequency` | `number` | `0.01` | Turbulence frequency |\n| `xChannelSelector` | `\"R\" \\| \"G\" \\| \"B\" \\| \"A\"` | `\"R\"` | X axis color channel for displacement |\n| `yChannelSelector` | `\"R\" \\| \"G\" \\| \"B\" \\| \"A\"` | `\"G\"` | Y axis color channel for displacement |\n| `numOctaves` | `number` | `2` | Turbulence detail level |\n\n## Links\n\n- **[🎨 Live Demo](https://vue-liquid-glass.netlify.app/)** - Interactive demonstration\n- **[📦 npm Package](https://www.npmjs.com/package/@daisigu/vue-liquid-glass)** - Install from npm\n- **[🐙 GitHub Repository](https://github.com/Daisigu/vue-liquid-glass)** - Source code and issues\n\n## Contributing\n\nContributions are welcome! Whether it's:\n\n- 🐛 Reporting bugs\n- 💡 Suggesting new features\n- 📝 Improving documentation\n- 🔧 Submitting pull requests\n\nPlease feel free to open an issue or submit a Pull Request on [GitHub](https://github.com/Daisigu/vue-liquid-glass).\n\n## License\n\nMIT\n","readmeFilename":"README.md"}