vue-curve

Description

Vue-Curve is a Vue 3 plugin which allows for a custom directive, v-curve, which applies a curved 'box-shadow' to any box-shaped element.

Demo

Installation

CLI

npm i vue-curve

CDN

<script src="https://unpkg.com/vue-curve"></script>

Setup

CLI

import { createApp } from 'vue'
import App from './App.vue'
import VueCurve from 'vue-curve'

const app = createApp(App)

app.use(VueCurve)
app.mount('#app')

CDN

const app = Vue.createApp({})

app.use(VueCurve)
app.mount('#app')

With options

// Intensity values: 'high', 'medium', 'low'
app.use(VueCurve, { color: '#000', intensity: 'medium' })

Usage

<div v-curve>VueCurve</div>

With local options

<div v-curve:[color]="intensity">VueCurve</div>