Vue Border Beam

Animated border beam effect for Vue 3, maintained by 前端开发爱好者.

Links

• npm: vue3-border-beam
• GitHub: xushanpei/vue3-border-beam

Repository

• GitHub URL: https://github.com/xushanpei/vue3-border-beam

git clone https://github.com/xushanpei/vue3-border-beam.git

Features

• Vue 3 component version of the animated border beam effect
• Supports sm, md, and line variants
• Supports colorful, mono, ocean, and sunset palettes
• Works with dark, light, and auto theme modes
• Library build and demo site are separated for cleaner npm publishing

Install

npm install vue3-border-beam

Basic Usage

<script setup lang="ts">
import { BorderBeam } from 'vue3-border-beam';
</script>

<template>
  <BorderBeam size="md" color-variant="colorful" theme="dark">
    <div class="card">Content</div>
  </BorderBeam>
</template>

Plugin Usage

import { createApp } from 'vue';
import BorderBeamPlugin from 'vue3-border-beam';
import App from './App.vue';

createApp(App).use(BorderBeamPlugin).mount('#app');

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | size | sm \| md \| line | md | Beam size preset | | colorVariant | colorful \| mono \| ocean \| sunset | colorful | Color palette | | theme | dark \| light \| auto | dark | Theme mode | | staticColors | boolean | false | Disable hue shift animation | | duration | number | 1.96 / 2.4 | Animation duration | | active | boolean | true | Enable or disable the effect | | borderRadius | number | auto detect | Override border radius | | brightness | number | 1.3 | Glow brightness | | saturation | number | preset-based | Glow saturation | | hueRange | number | 30 | Hue animation range | | strength | number | 1 | Overall effect strength |

Development

pnpm install
pnpm run dev
pnpm run build:lib
pnpm run build:demo
pnpm run pack:check

License

MIT