A Vue 3/2 plugin that provides 100+ well-designed box shadow effects for containers.
How to use it:
1. Import and register the vueBoxShadows.
// Vue 3
import { createApp } from "vue"
import App from "./App.vue"
import shadows from "vue3-box-shadows";
const app = createApp(App);
app.use(shadows);
app.mount('#app');
// Vue 2
import Vue from "vue";
import vueBoxShadows from "vue-box-shadows";
Vue.use(vueBoxShadows, {
// options
});
2. Apply a basic box shadow to a DIV container.
<template>
<div v-box-shadow>
...
</div>
</template>
3. Specify the shadow type.
| Group | Id | Names ($ is value/number) | Values |
|---|---|---|---|
| None | 0 | none | 1 |
| Elevation | 1-24 | el-$ | 1-24 |
| Borders | 25-30 | bd-$ | 1-6 |
| Neumorphism | 31-39 | neu-$ or neu-$-i or neu-$-io | 1-3 |
| Axis x | 40-45 | ax-$ | 1-6 |
| Axis y | 46-51 | ay-$ | 1-6 |
| Small inner side | 52-55 | si-$ | 1-4 |
| Medium inner side | 56-59 | mi-$ | 1-4 |
| Large inner side | 60-63 | li-$ | 1-4 |
| Top | 64-69 | t-$ | 1-6 |
| Bottom | 70-75 | b-$ | 1-6 |
| Right side | 76-81 | r-$ | 1-6 |
| Left side | 82-87 | l-$ | 1-6 |
| Angle: top left | 88-93 | tl-$ | 1-6 |
| Angle: top right | 94-99 | tr-$ | 1-6 |
| Angle: bottom right | 100-105 | br-$ | 1-6 |
| Angle: bottom left | 106-111 | bl-$ | 1-6 |
| Patterns | 112-115 | p-$ | 1-2 |
<template> <!-- use name --> <div v-box-shadow:neu-3></div> <!-- or use id --> <div v-box-shadow="34"></div> </template>
4. Available options:
Vue.use(vueBoxShadows, {
// inject styles into head section automatically
useClass: false,
// create your own box shadows
shadowBaseCustom: '0 2px 8px 0 rgb(50 50 50 / 8%)',
});
Preview:
Changelog:
v2.0.3 (11/15/2022)
- Update package
v2.0.2 (11/14/2022)
- Update
v2.0.0 (09/11/2022)
- Added a new option to use shadows.
Download Details:
Author: andrejsharapov
Live Demo: https://codesandbox.io/s/v-b-s-1-0-4-elevation-w22j9h?file=/src/App.vue
Download Link: https://github.com/andrejsharapov/vue-box-shadows/archive/refs/heads/master.zip
Official Website: https://github.com/andrejsharapov/vue-box-shadows
Install & Download:
# Vue 2
$ yarn add vue-box-shadows
$ npm i vue-box-shadows
# Vue 3
$ yarn add vue3-box-shadows
$ npm i vue3-box-shadows