Create Realistic Shadow For Images - vue-image-shadow

Install & Download:

# Yarn
$ yarn add vue-image-shadow --save
# NPM
$ npm i vue-image-shadow --save

Description:

A Vue.js component that applies a configurable, realistic, interactive shadow effect to the image.

How to use it:

1. Import and register the component.

import ImageShadow from 'vue-image-shadow'
Vue.component('image-shadow', ImageShadow)

2. Add the image shadow component to the app and define the path to the image as follows:

<image-shadow :width="200" :src="this.myscr">
</image-shadow>

export default {
  data() {
    return {
      mySrc: '1.jpg'
    }
  }
}

3. Config the image shadow using the following component props.

<image-shadow 
  :width="200" 
  :src="this.mySrc"
  class-name="example"
  :shadow-blur="10"
  shadow-hover>
</image-shadow>

className: {
  type: String
},
shadowBlur: {
  type: Number,
  default: 20
},
shadowHover: {
  type: Boolean,
  default: false
},
shadowRadius: {
  type: Number,
  default: 8
},
src: {
  type: String,
  required: true
},
width: {
  type: Number,
  default: 300
},