Liquid Glass Vue Components | npm Package & Documentation for Liquid Glass Effects in Vue.js

Installation

Get started with Liquid Glass Vue components by installing the NPM package and setting up the required imports.

Install Package

npm install @tinymomentum/liquid-glass-vue@latest

Import Components

import { LiquidGlassLink, LiquidGlassButton, LiquidGlassContainer } from '@tinymomentum/liquid-glass-vue'

Import Styles

Add this import to your main.js file:

// main.js
import '@tinymomentum/liquid-glass-vue/dist/liquid-glass-vue.css'

Available Components

Three powerful components to create stunning liquid glass effects in your Vue applications.

LiquidGlassContainer

A versatile container component that applies liquid glass effects to any content. Perfect for cards, panels, and content sections.

LiquidGlassButton

An interactive button component with liquid glass styling. Supports all native button events and properties.

LiquidGlassLink

A stylized link component with liquid glass effects. Maintains all anchor tag functionality while adding beautiful visual effects.

Component Properties

All components share the same customizable properties to control the liquid glass effect appearance.

Want to experience and adjust these properties intuitively? Try the generator!

Property	Type	Default	Description
width	Number	300	Width of the component in pixels
height	Number	200	Height of the component in pixels
borderRadius	Number	28	Border radius in pixels for rounded corners
innerShadowColor	String	'rgba(255, 255, 255, 0.7)'	Color of the inner shadow effect
innerShadowBlur	Number	20	Blur radius of the inner shadow in pixels
innerShadowSpread	Number	-5	Spread radius of the inner shadow in pixels
glassTintColor	String	'#ffffff'	Base tint color for the glass effect
glassTintOpacity	Number	0	Opacity of the glass tint (0-100)
frostBlurRadius	Number	0	Blur radius for the frosted glass effect
noiseFrequency	Number	0.008	Frequency of the noise distortion effect
noiseStrength	Number	77	Strength of the noise distortion effect

Supported Events

All components support their respective native HTML events, maintaining full compatibility with Vue.js event handling.

LiquidGlassButton Events

Supports all native button events:

// All button events are supported
@click, @dblclick, @contextmenu
@mouseenter, @mouseleave
@mousedown, @mouseup
@focus, @blur, @keydown, @keyup

LiquidGlassLink Events

Supports all native anchor events:

// All anchor events are supported
@click, @auxclick, @keydown
@mouseenter, @mouseleave
@focus, @blur

Usage Examples

Complete examples showing how to use each component in your Vue.js applications.

Basic Container

Use LiquidGlassContainer to wrap any content with liquid glass effects:

<template>
  <LiquidGlassContainer>
    <div class="content">
      <h3>Basic Container Example</h3>
      <p>This is a basic liquid glass container</p>
    </div>
  </LiquidGlassContainer>
</template>
<script>
import { LiquidGlassContainer } from '@tinymomentum/liquid-glass-vue'
export default {
  components: {
    LiquidGlassContainer
  }
}
</script>

Interactive Button

Create beautiful interactive buttons with full event support:

<template>
  <LiquidGlassButton
    :width="200"
    :height="60"
    :borderRadius="30"
    :innerShadowColor="'rgba(255, 255, 255, 0.7)'"
    :innerShadowBlur="15"
    :innerShadowSpread="-3"
    :glassTintColor="'#ffffff'"
    :glassTintOpacity="0"
    :frostBlurRadius="2"
    :noiseFrequency="0.008"
    :noiseStrength="77"
    @click="handleButtonClick"
    @mouseenter="handleButtonMouseEnter"
    @mouseleave="handleButtonMouseLeave">
    Button Example
  </LiquidGlassButton>
</template>

<script>
import { LiquidGlassButton } from '@tinymomentum/liquid-glass-vue'
export default {
  components: {
    LiquidGlassButton
  },
  methods: {
    handleButtonClick() {
      console.log('Button clicked!')
    },
    handleButtonMouseEnter() {
      console.log('Mouse entered button')
    },
    handleButtonMouseLeave() {
      console.log('Mouse left button')
    }
  }
}
</script>

Stylized Link

Create elegant links with liquid glass styling:

<template>
  <LiquidGlassLink
    :width="200"
    :height="60"
    :borderRadius="30"
    :innerShadowColor="'rgba(255, 255, 255, 0.7)'"
    :innerShadowBlur="15"
    :innerShadowSpread="-3"
    :glassTintColor="'#ffffff'"
    :glassTintOpacity="0"
    :frostBlurRadius="2"
    :noiseFrequency="0.008"
    :noiseStrength="77"
    href="https://www.google.com"
    target="_blank"
    rel="noopener noreferrer"
    @click="handleLinkClick">
    Visit Google
  </LiquidGlassLink>
</template>

<script>
import { LiquidGlassLink } from '@tinymomentum/liquid-glass-vue'
export default {
  components: {
    LiquidGlassLink
  },
  methods: {
    handleLinkClick() {
      console.log('Link clicked!')
    }
  }
}
</script>

Complete Setup Example

Here's a complete Vue.js application setup with all components:

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import '@tinymomentum/liquid-glass-vue/dist/liquid-glass-vue.css'

createApp(App).mount('#app')

<!-- App.vue -->
<template>
    <div id="app">
      <LiquidGlassContainer :width="400" :height="300" :borderRadius="20">
        <div>
        <h1>Welcome to Liquid Glass</h1>
        <p>Beautiful liquid glass effects for Vue.js</p>
          <LiquidGlassButton :width="200" :height="60" :borderRadius="30" @click="showAlert" style="margin-top: 20px;">
          Click Me
        </LiquidGlassButton>
        
        <LiquidGlassLink :width="200" :height="60" :borderRadius="30" href="https://github.com" target="_blank" style="margin-top: 20px;">
          Visit GitHub
        </LiquidGlassLink>
        </div>
        
      </LiquidGlassContainer>
    </div>
</template>
  
<script>
  import { 
    LiquidGlassLink, 
    LiquidGlassButton, 
    LiquidGlassContainer 
  } from '@tinymomentum/liquid-glass-vue'
  
  export default {
    name: 'App',
    components: {
      LiquidGlassLink,
      LiquidGlassButton,
      LiquidGlassContainer
    },
    methods: {
      showAlert() {
        alert('Liquid Glass Button Clicked!')
      }
    }
  }
</script>
        

Ready to Get Started?

Try our interactive generator to customize your liquid glass effects, then use the Vue components in your project!

Try Generator View Examples

Vue.js Documentation