$ npm install ambient-image --save
// import the module
import AmbientImage from 'ambient-image'
// import the stylesheet
import '../node_modules/ambient-image/dist/lib/ambient-image.min.css'
// add to Vue
Vue.use(AmbientImage)
// or add it to another Vue component
components: {
AmbientImage
}
<ambient-image src="/path/to/image.jpg" />
Below are the props you can use to customize component's look and feel.
src - required: true, type: String, required URI of the image
width - required: false, type: Number, default: undefined, optional image width
height - required: false, type: Number, default: undefined, optional image height
blur - required: false, type: Number, default: 14, blur strength (10 - 20)
elevation - required: false, type: Number, default: 14, ambience elevation (10 - 32)
direction - required: false, type: Number, default: down, ambience direction (up, center, down)
Created by Martin Ivanov. Follow @vuecidity and check my blog.
Version: