# vue-curve

> A Vue 3 plugin that exposes a custom directive to apply a curved 'box-shadow' to any box-shaped element

Latest version **0.1.14** (published 2021-02-04) · 0 weekly downloads

## Install

```sh
npm install vue-curve
pnpm add vue-curve
yarn add vue-curve
bun add vue-curve
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.14 |
| Published | 2021-02-04 |
| First published | 2020-11-01 |
| Weekly downloads | 0 |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 37.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Daniel Knights |
| Maintainers | daniel_knights |
| Keywords | vue, vue3, vuejs, plugin, directive, style, css |

## Links

- npm: https://www.npmjs.com/package/vue-curve
- Repository: https://github.com/Daniel-Knights/vue-curve
- Homepage: https://github.com/Daniel-Knights/vue-curve#readme
- Issues: https://github.com/Daniel-Knights/vue-curve/issues
- npm.io page: https://npm.io/package/vue-curve

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 0.1.14 (latest) — 2021-02-04
- 0.1.13 — 2021-02-04
- 0.1.12 — 2021-02-04
- 0.1.11 — 2021-02-04
- 0.1.10 — 2021-02-04
- 0.1.9 — 2021-02-04
- 0.1.8 — 2020-11-19
- 0.1.7 — 2020-11-18
- 0.1.6 — 2020-11-03
- 0.1.5 — 2020-11-02
- 0.1.4 — 2020-11-02
- 0.1.3 — 2020-11-02
- 0.1.2 — 2020-11-01
- 0.1.1 — 2020-11-01
- 0.1.0 — 2020-11-01

## README

# vue-curve

[![npm](https://img.shields.io/npm/v/vue-curve.svg)](https://www.npmjs.com/package/vue-curve)
[![vue](https://img.shields.io/badge/vue-3.x-brightgreen)](https://v3.vuejs.org/)

## 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](https://codepen.io/daniel-knights/pen/OJXZvMv)

## Installation

### CLI

```bash
npm i vue-curve
```

### CDN

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

## Setup

### CLI

```js
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

```js
const app = Vue.createApp({})

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

#### With options

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

## Usage

```html
<div v-curve>VueCurve</div>
```

#### With local options

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

---
_Source: https://npm.io/package/vue-curve · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._