Vue plugin for AOS (animate on scroll library)
<script src="https://unpkg.com/v-aos"></script>npm i v-aos --saveimport Vue from 'vue'
import VAos from 'v-aos'
Vue.use(VAos);With AOS init settings :
Vue.use(VAos, {
startEvent: 'DOMContentLoaded',
duration: 400,
delay: 100
})<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>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' },
]AOS object can be accessed through $aos property in components or through window.AOS
export default {
mounted() {
this.$nextTick(() => this.$aos.refreshHard())
}
}<div v-aos:fade-up @aos:in="handleAosIn"></div>MIT
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent