nuxt-aos's Introduction

Nuxt Aos

A Nuxt module for adding animate on scroll to your application.

✨ Release Notes

Features

⛰ Easily add animate on scroll library to your nuxt app

Quick Setup

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 the modules section of nuxt.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>

Development

# 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

Recommend Projects