100+ Box Shadows For Vue App

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

Description:

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%)',
});