https://github.com/kn0wn/vue-cosha
🎨 A vue directive for the cosha library
https://github.com/kn0wn/vue-cosha
directive tiny vue
Last synced: 8 months ago
JSON representation
🎨 A vue directive for the cosha library
- Host: GitHub
- URL: https://github.com/kn0wn/vue-cosha
- Owner: kn0wn
- License: mit
- Created: 2020-03-14T18:57:25.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-01-17T09:04:49.000Z (almost 4 years ago)
- Last Synced: 2025-04-23T15:17:35.956Z (8 months ago)
- Topics: directive, tiny, vue
- Language: JavaScript
- Homepage:
- Size: 592 KB
- Stars: 81
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
- awesome-vue - vue-cosha - A vue directive for the cosha library ` 📝 5 months ago` (UI Components [🔝](#readme))
- awesome-vue - vue-cosha - 🎨 An easy to use vue directive that places a colourful shadow behind any image (Components & Libraries / UI Components)
README
# vue-cosha
[](https://www.npmjs.com/package/vue-cosha) [](https://www.npmjs.com/package/vue-cosha) [](https://bundlephobia.com/result?p=vue-cosha@0.1.1)
Vue cosha is a simple port of the [cosha](https://github.com/robinloeffel/cosha) library for ease of use in Vue projects.
> "Colorful shadows for your images. 🎨"
[cosha](https://npm.robinloeffel.ch/cosha) lets you add **co**lorful **sha**dows to your images. Try it out and look for yourself—the bundle is less than 2kb and it couldn't be easier to use!
## How
```
npm i vue-cosha
```
```js
import Vue from "vue";
import VueCosha from "vue-cosha";
Vue.use(VueCosha);
```
```vue
```
## Nuxt
```
npm i vue-cosha
```
Create a file called `vue-chosha.js` in your plugins folder with the following inside
```js
import Vue from "vue";
import VueCosha from "vue-cosha";
Vue.use(VueCosha);
```
Register the plugin in your `nuxt.config.js`
```js
plugins: [
'~/plugins/vue-cosha'
],
```
## Config
Everything in the config is optional. The default values are:
```js
import VueCosha from "vue-cosha";
Vue.use(VueCosha, {
blur: "5px",
brightness: 1,
saturation: 1,
x: 0,
y: 0
});
```
You can also add options in the directive to change for that specific element
```vue
v-cosha="{ blur: '15px' }"
```
## License
MIT