{"_id":"@chencu/liquid-glass-vue","_rev":"2-6e6f6eca7a8b5c161c26cd3151fca05c","name":"@chencu/liquid-glass-vue","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@chencu/liquid-glass-vue","version":"1.0.0","keywords":["vue","vue3","liquid","glass","effect","apple","ui","component"],"author":{"name":"Vue adaptation of liquid-glass-react"},"license":"MIT","_id":"@chencu/liquid-glass-vue@1.0.0","maintainers":[{"name":"chencu","email":"chencu5958@outlook.com"}],"homepage":"https://github.com/chencu5958/liquid-glass-vue","bugs":{"url":"https://github.com/chencu5958/liquid-glass-vue/issues"},"dist":{"shasum":"4378be89904c3cb69ac8ce682cdb2aec9272308c","tarball":"https://registry.npmjs.org/@chencu/liquid-glass-vue/-/liquid-glass-vue-1.0.0.tgz","fileCount":7,"integrity":"sha512-zdhamjpaeCcdMeftY6elfpOG5cbhZDY0LQcS2EH88Ljx3XpEf0kd34m2r73VaufLyQHXR0+5AGpTIfrVq7BWqA==","signatures":[{"sig":"MEUCIQCF7CgdyYZdDsr7fQXR5xKa1qDlirVeljEKnz/iXx0AhgIgducs8o1kqo1wHoOcz3OJqgCBoy1yoBSiGexZBJYyxOE=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":176112},"main":"./dist/index.cjs","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}}},"gitHead":"fede728f29458265fa91943fe9a1cbdaeb3a4806","private":false,"scripts":{"dev":"vite","lint":"run-s lint:*","build":"vite build --config vite.config.ts","format":"prettier --write src/","preview":"vite preview","release":"standard-version","build:lib":"vite build --config vite.config.lib.ts","test:unit":"vitest","lint:eslint":"eslint . --fix","lint:oxlint":"oxlint . --fix -D correctness --ignore-path .gitignore"},"_npmUser":{"name":"chencu","email":"chencu5958@outlook.com"},"repository":{"url":"git+https://github.com/chencu5958/liquid-glass-vue.git","type":"git"},"_npmVersion":"10.9.2","description":"Performance-optimized Apple's Liquid Glass effect for Vue 3. Fork with 70% better performance.","directories":{},"_nodeVersion":"22.15.0","dependencies":{"vue":"^3.1.13"},"_hasShrinkwrap":false,"devDependencies":{"jiti":"^2.4.2","vite":"^6.2.4","jsdom":"^26.0.0","eslint":"^9.22.0","oxlint":"^0.16.0","vitest":"^3.1.1","postcss":"^8.5.5","vue-tsc":"^2.2.8","prettier":"3.5.3","typescript":"~5.8.0","@types/node":"^22.14.0","tailwindcss":"^4.1.10","@types/jsdom":"^21.1.7","autoprefixer":"^10.4.21","npm-run-all2":"^7.0.2","@vue/tsconfig":"^0.7.0","@vue/test-utils":"^2.4.6","vite-plugin-dts":"^4.5.4","@tsconfig/node22":"^22.0.1","standard-version":"^9.5.0","@tailwindcss/vite":"^4.1.10","eslint-plugin-vue":"~10.0.0","@vitejs/plugin-vue":"^5.2.3","eslint-plugin-oxlint":"^0.16.0","@vitest/eslint-plugin":"^1.1.39","@vitejs/plugin-vue-jsx":"^4.1.2","@tailwindcss/typography":"^0.5.16","vite-plugin-vue-devtools":"^7.7.2","@vue/eslint-config-prettier":"^10.2.0","@vue/eslint-config-typescript":"^14.5.0"},"_npmOperationalInternal":{"tmp":"tmp/liquid-glass-vue_1.0.0_1754932953540_0.06926005455668949","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@chencu/liquid-glass-vue","version":"1.0.1","description":"Performance-optimized Apple's Liquid Glass effect for Vue 3. Fork with 70% better performance.","keywords":["vue","vue3","liquid","glass","effect","apple","ui","component"],"homepage":"https://github.com/chencu5958/liquid-glass-vue","repository":{"type":"git","url":"git+https://github.com/chencu5958/liquid-glass-vue.git"},"license":"MIT","author":{"name":"Vue adaptation of liquid-glass-react"},"private":false,"type":"module","main":"./dist/index.cjs","module":"./dist/index.js","types":"./dist/index.d.ts","exports":{".":{"import":{"types":"./dist/index.d.ts","default":"./dist/index.js"},"require":{"types":"./dist/index.d.ts","default":"./dist/index.cjs"}}},"scripts":{"release":"standard-version","build:lib":"vite build --config vite.config.lib.ts","build":"vite build --config vite.config.ts","dev":"vite","preview":"vite preview","test:unit":"vitest","lint:oxlint":"oxlint . --fix -D correctness --ignore-path .gitignore","lint:eslint":"eslint . --fix","lint":"run-s lint:*","format":"prettier --write src/"},"dependencies":{"vue":"^3.1.13"},"devDependencies":{"@tailwindcss/typography":"^0.5.16","@tailwindcss/vite":"^4.1.10","@tsconfig/node22":"^22.0.1","@types/jsdom":"^21.1.7","@types/node":"^22.14.0","@vitejs/plugin-vue":"^5.2.3","@vitejs/plugin-vue-jsx":"^4.1.2","@vitest/eslint-plugin":"^1.1.39","@vue/eslint-config-prettier":"^10.2.0","@vue/eslint-config-typescript":"^14.5.0","@vue/test-utils":"^2.4.6","@vue/tsconfig":"^0.7.0","autoprefixer":"^10.4.21","eslint":"^9.22.0","eslint-plugin-oxlint":"^0.16.0","eslint-plugin-vue":"~10.0.0","jiti":"^2.4.2","jsdom":"^26.0.0","npm-run-all2":"^7.0.2","oxlint":"^0.16.0","postcss":"^8.5.5","prettier":"3.5.3","standard-version":"^9.5.0","tailwindcss":"^4.1.10","typescript":"~5.8.0","vite":"^6.2.4","vite-plugin-dts":"^4.5.4","vite-plugin-vue-devtools":"^7.7.2","vitest":"^3.1.1","vue-tsc":"^2.2.8"},"_id":"@chencu/liquid-glass-vue@1.0.1","gitHead":"53e3d3abf5988b9de587013ff3815bc4ebf6d70e","bugs":{"url":"https://github.com/chencu5958/liquid-glass-vue/issues"},"_nodeVersion":"22.15.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-nYPF6HXQFfRxSTs2Mpmm6/JkX5SQn2Tlu9v/MC79+2dvxJ7uZwIUHyviVrNEgNJ3fO3qDutBe3lJ8bGtRlHyDA==","shasum":"81c665b20030e1124ff5ac88918ee8a9ea3878f9","tarball":"https://registry.npmjs.org/@chencu/liquid-glass-vue/-/liquid-glass-vue-1.0.1.tgz","fileCount":7,"unpackedSize":181786,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIBY8vuop6jKMfohxR1+e1ZmxpyIVU5YwbrJmE62E2Sl1AiBj/oeKaoUEa2vum32FIUbG3KCR/XedWIva8htNoOQpLg=="}]},"_npmUser":{"name":"chencu","email":"chencu5958@outlook.com"},"directories":{},"maintainers":[{"name":"chencu","email":"chencu5958@outlook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/liquid-glass-vue_1.0.1_1755015673041_0.915654317155822"},"_hasShrinkwrap":false}},"time":{"created":"2025-08-11T17:22:33.432Z","modified":"2025-08-12T16:21:13.400Z","1.0.0":"2025-08-11T17:22:33.794Z","1.0.1":"2025-08-12T16:21:13.201Z"},"bugs":{"url":"https://github.com/chencu5958/liquid-glass-vue/issues"},"author":{"name":"Vue adaptation of liquid-glass-react"},"license":"MIT","homepage":"https://github.com/chencu5958/liquid-glass-vue","keywords":["vue","vue3","liquid","glass","effect","apple","ui","component"],"repository":{"type":"git","url":"git+https://github.com/chencu5958/liquid-glass-vue.git"},"description":"Performance-optimized Apple's Liquid Glass effect for Vue 3. Fork with 70% better performance.","maintainers":[{"name":"chencu","email":"chencu5958@outlook.com"}],"readme":"# Liquid Glass Vue\n\nApple's Liquid Glass effect for Vue 3.\n\n> **πŸ“ Note:** This Vue implementation is based on the original [liquid-glass-react](https://github.com/rdev/liquid-glass-react) library. All core effects and algorithms have been adapted from the React version to work with Vue 3's Composition API.\n\n**[δΈ­ζ–‡](./README-zh.md)**\n\n| Card Example | Button Example |\n| :------------------------------------------------------------------------: | :--------------------------------------------------------------------------: |\n| ![](https://github.com/rdev/liquid-glass-react/raw/master/assets/card.png) | ![](https://github.com/rdev/liquid-glass-react/raw/master/assets/button.png) |\n\n## 🎬 Demo\n\n[Click here](https://liquid-glass-vue.netlify.app/) to see it in action!\n\n![project liquid gif](./assets/project-liquid.gif)\n\n## ✨ Features\n\n- Proper edgy bending and refraction\n- Multiple refraction modes\n- Configurable frosty level\n- Supports arbitrary child elements\n- Configurable paddings\n- Correct hover and click effects\n- Edges and highlights take on the underlying light like Apple's does\n- Configurable chromatic aberration\n- Configurable elasticity, to mimic Apple's \"liquid\" feel\n- Full Vue 3 support with Composition API\n- TypeScript support\n\n> **⚠️ NOTE:** Safari and Firefox only partially support the effect (displacement will not be visible)\n\n## πŸš€ Usage\n\n### Installation\n\n```bash\nnpm install @chencu/liquid-glass-vue\n```\n\n### Global Usage\n\n```ts\nimport LiquidGlass from '@chencu/liquid-glass-vue'\nimport { createApp } from 'vue'\n\nconst app = createApp()\n\napp.use(LiquidGlass)\n```\n\n```vue\n\n\n\n```\n\n### Basic Usage\n\n```vue\n\n\n\n```\n\n### Button Example\n\n```vue\n\n\n\n```\n\n### Mouse Container Example\n\nWhen you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the `mouseContainer ` prop:\n\n```vue\n\n\n\n```\n\n## Props\n\n| Prop | Type | Default | Description |\n| --------------------- | ---------------------------------------------------------------------------------------- | --------------- | ---------------------------------------------------------------------------------------------------- |\n| `displacementScale` | `number` | `70` | Controls the intensity of the displacement effect |\n| `blurAmount` | `number` | `0.0625` | Controls the blur/frosting level |\n| `saturation` | `number` | `140` | Controls color saturation of the glass effect |\n| `aberrationIntensity` | `number` | `2` | Controls chromatic aberration intensity |\n| `elasticity` | `number` | `0.15` | Controls the \"liquid\" elastic feel (0 = rigid, higher = more elastic) |\n| `cornerRadius` | `number` | `999` | Border radius in pixels |\n| `class` | `string` | `\"\"` | Additional CSS classes |\n| `padding` | `string` | `\"24px 32px\"` | CSS padding value |\n| `style` | `CSSProperties` | - | Additional inline styles |\n| `overLight` | `boolean` | `false` | Whether the glass is over a light background |\n| `mouseContainer` | `Ref` | `null` | Container element to track mouse movement on (defaults to the glass component itself) |\n| `mode` | `\"standard\" \\| \"polar\" \\| \"prominent\" \\| \"shader\"` | `\"standard\"` | Refraction mode for different visual effects. `shader` is the most accurate but not the most stable. |\n| `globalMousePos` | `{ x: number; y: number }` | - | Global mouse position coordinates for manual control |\n| `mouseOffset` | `{ x: number; y: number }` | - | Mouse position offset for fine-tuning positioning |\n| `effect` | `\"flowingLiquid\" \\| \"liquidGlass\" \\| \"transparentIce\" \\| \"unevenGlass\" \\| \"mosaicGlass\"` | `\"liquidGlass\"` | Shader effect type, only works when mode is \"shader\" |\n\n## Events\n\n| Event | Type | Description |\n| -------- | ------------ | ------------------------------------------- |\n| `@click` | `() => void` | Emitted when the glass component is clicked |\n\n## Directive vs Component\n\n### Use the Directive when:\n\n- You want to apply liquid glass effect to existing elements\n- You need more control over the DOM structure\n- You're working with complex layouts where components might interfere\n- You want to apply the effect to third-party components\n\n### Use the Component when:\n\n- You want a complete glass container solution\n- You prefer the component-based approach\n- You need the full feature set with minimal setup\n- You're building new UI elements from scratch\n\n## Development\n\nThis Vue implementation maintains the same visual effects and behavior as the original React version while utilizing Vue 3's reactive system and Composition API for optimal performance.\n\n### Credits\n\n- Original React implementation: [liquid-glass-react](https://github.com/rdev/liquid-glass-react) by [rdev](https://github.com/rdev)\n- Original Vue implementation: [liquid-glass-vue](https://github.com/WXperia/liquid-glass-vue) by [WXperia](https://github.com/WXperia)\n- Vue adaptation: Converted to Vue 3 with Composition API\n","readmeFilename":"README.md"}