Vue3 Box-shadows

A collection of simple and airy shadows for Vue.js v3 projects.

Note
You are reading the documentation for vue-box-shadows on Vue.js v3.
Documentation for vue-box-shadows for Vue.js v2 is here.

Download and Installation

$ npm i --save-dev vue3-box-shadows
# or yarn
$ yarn add --dev vue3-box-shadows

Usage

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');

To create a basic shadow element with minimal configuration, write the following:

<template>
  <div v-box-shadow>
    Add beautiful shadow effects to your project without thinking about CSS.
    Properties are supported by all modern browsers.
  </div>
</template>

To use collection shadows, you need to apply id or short name-$ ($ is value) from the groups table.

<template>
  <!-- use name -->
  <div v-box-shadow:neu-2></div>

  <!-- or -->

  <!--  use id -->
  <div v-box-shadow="34"></div>
</template>

Groups

Examples of shadows can be seen in the table below. To work with shadows on your site, simply select a group that matches your site's style (elevation to example), select an ids or names, and you're done.

Group	Id	Names	Values	Examples
None	0	`none`	1	---
Elevation	1-24	`el-$`	1-24	View
Borders	25-30	`bd-$`	1-6	View
Neumorphism	31-39	`neu-$` or `neu-$-i` or `neu-$-io`	1-3	View
Axis x	40-45	`ax-$`	1-6	View
Axis y	46-51	`ay-$`	1-6	View
Small inner side	52-55	`si-$`	1-4	View
Medium inner side	56-59	`mi-$`	1-4	View
Large inner side	60-63	`li-$`	1-4	View
Top	64-69	`t-$`	1-6	View
Bottom	70-75	`b-$`	1-6	View
Right side	76-81	`r-$`	1-6	View
Left side	82-87	`l-$`	1-6	View
Angle: top left	88-93	`tl-$`	1-6	View
Angle: top right	94-99	`tr-$`	1-6	View
Angle: bottom right	100-105	`br-$`	1-6	View
Angle: bottom left	106-111	`bl-$`	1-6	View
Patterns	112-115	`p-$`	1-2	---

Options

Option	Type	Default	Description
useClass	Boolean	false	Set to `true` in order to import styles into `<head>` automatically.
shadowBaseCustom	String	"0 2px 8px 0 rgb(50 50 50 / 8%)"	Set a value for `box-shadow` to change the default property.

// ...
app.use(shadows, {
  useClass: false,
  shadowBaseCustom: "0 2px 8px 0 rgb(50 50 50 / 8%)",
});

License

Vue-box-shadows is licensed under the MIT license. You are free to use, modify and distribute this software, as long as the copyright header is left intact.

Installing · Usage · Groups · Options