README
v-aos
Vue plugin for AOS (animate on scroll library)
Using
1. Install
npm i v-aos --save
2. Plug-in
import Vue from 'vue'
import VAos from 'v-aos'
Vue.use(VAos);
With AOS init settings :
Vue.use(VAos, {
startEvent: 'DOMContentLoaded',
duration: 400,
delay: 100
})
3. Use in your components
<template>
<div v-aos:fade-up>Hello world</div>
</template>
With flags:
<template>
<div v-aos:fade-up.once>Hello world</div>
</template>
With parameters:
<template>
<div v-aos:fade-up="{ delay: 100, offset: 200 }">Hello world</div>
</template>
4. Use with Nuxt
plugins/v-aos.js:
import Vue from 'vue'
import VAos from 'v-aos'
Vue.use(VAos);
nuxt.config.js:
plugins: [
{ src: '~/plugins/v-aos', mode: 'client' },
]
5. Access AOS object
AOS object can be accessed through $aos property in components or through window.AOS
export default {
mounted() {
this.$aos.refreshHard()
}
}
6. AOS events
<div v-aos:fade-up @aos:in="handleAosIn"></div>
License
MIT