A Nuxt module for adding animate on scroll to your application.
- ⛰ Easily add animate on scroll library to your nuxt app
- Add
nuxt-aos
dependency to your project
# Using pnpm
pnpm add -D nuxt-aos
# Then (very important until the module has fixed)
pnpm add -D aos
- Add
nuxt-aos
to themodules
section ofnuxt.config.ts
export default defineNuxtConfig({
modules: [
'nuxt-aos'
]
})
follow the below step carefully it's important to make it work on Nuxt3
Thanks to @YourItalianChef
//////create [[plugins]] folder then create [[aos.js]]
[Note:: Using ts idm will auto download the file b care 4]////////
import {defineNuxtPlugin} from '#app'
import AOS from 'aos';
import 'aos/dist/aos.css';
export default defineNuxtPlugin((nuxtApp) => {
if (typeof window !== 'undefined') {
nuxtApp.AOS = AOS.init({
once: false,
});
}
});
[[nuxt.config.ts]]
plugins: [
{src: '~/plugins/aos.js', mode: 'client'}
],
// webstorm autocomplete download both and activate in [libraries] settings//
use this link if you want to use aos on-the-fly use "useHead" function on Nuxt3
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
Usage example:
<div data-aos="fade-up"></div>
# Install dependencies
npm install
# Generate type stubs
npm run dev:prepare
# Develop with the playground
npm run dev
# Build the playground
npm run dev:build
# Run ESLint
npm run lint
# Run Vitest
npm run test
npm run test:watch
# Release new version
npm run release