How to use AOS with Nuxt.js?

[hutong9]

How to use AOS with Nuxt.js?

[aligu7]

I am trying integrate the aos with nuxt.js app as well, I tried using plugins and adding mixins, but both of them aren't working

[laurensV]

Create a plugin file (plugins/aos.ts):

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,
    });
  }
});

And make sure to only load the plugin for client mode in nuxt.config.ts:

 plugins: [
    { src: '~/plugins/aos', mode: 'client' },
  ],

Only problem is that it will only show the animation on the first visit on every page (or again after a refresh), but when navigating to a page more than once it seems to remember that it already did the animation and is not doing the animation again. Probably something todo with how nuxt/vue is rendering the DOM.. Not sure if there is a fix for that problem..

[djom202]

I've the same problem with Nuxt3, I didn't can integrate it.

[andreyquerino]

I imported the library in index.vue/app.vue and it worked.

Nuxt 3.6.2

<script setup lang="ts">

import AOS from 'aos';
onMounted(() => AOS.init());

</script>

<template>
   <div data-aos="fade-left" data-aos-duration="1000"></div>
</template>

[aligu7]

Thank you @laurensV for a detailed and working solution! And also the problem that you said about the animation not happening after renavigating to pages luckily doesn't appear in my case! So it's great! Thanks! 😁

[wintsa123]

它只会在每个页面上的第一次访问时（或在刷新后再次）显示动画，但是当多次导航到一个页面时，它似乎记得它已经做了动画并且没有再次做动画。可能与nuxt / vue如何渲染DOM有关。不确定是否有该问题的解决方法。

我在index.vue/app.vue中导入了库，它工作了。

Nuxt 3.6.2

<script setup lang="ts">

import AOS from 'aos';
onMounted(() => AOS.init());

</script>

<template>
   <div data-aos="fade-left" data-aos-duration="1000"></div>
</template>

能给出更详细的配置吗，我的也遇到了初次进入页面，并不工作的问题，更新部分data后或者媒体查询宽度修改后又正常工作了

[andreyquerino]

它只会在每个页面上的第一次访问时（或在刷新后再次）显示动画，但是当多次导航到一个页面时，它似乎记得它已经做了动画并且没有再次做动画。可能与nuxt / vue如何渲染DOM有关。不确定是否有该问题的解决方法。

我在index.vue/app.vue中导入了库，它工作了。 Agora 3.6.2

<script setup lang="ts">

import AOS from 'aos';
onMounted(() => AOS.init());

</script>

<template>
   <div data-aos="fade-left" data-aos-duration="1000"></div>
</template>

Dados询宽度修改后又正常工作了

npm install aos --save

Use directly on the page you want to use.

<script lang="ts" setup>
import AOS from 'aos';
import 'aos/dist/aos.css';

onMounted(() => {
    AOS.init();
});
</script>

<template>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <div data-aos="fade-left" data-aos-duration="1000">
    <img src="https://michalsnik.github.io/aos/img/github_octocat.png">
  </div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <div data-aos="fade-right" data-aos-duration="1000">
    <img src="https://michalsnik.github.io/aos/img/github_octocat.png">
  </div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</template>

Or create a plugin to use on all pages.

// plugins/aos.client.ts

import AOS from 'aos';
import 'aos/dist/aos.css';

export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.AOS = new AOS.init({});
});

<!-- pages -->

<template>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <div data-aos="fade-left" data-aos-duration="1000">
    <img src="https://michalsnik.github.io/aos/img/github_octocat.png">
  </div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

  <div data-aos="fade-right" data-aos-duration="1000">
    <img src="https://michalsnik.github.io/aos/img/github_octocat.png">
  </div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</template>

Both worked in recent version of nuxt.

[jibrilmohamod]

I found this nuxt module which works https://github.com/egidiusmengelberg/nuxt-aos.

[klren0312]

I found this nuxt module which works https://github.com/egidiusmengelberg/nuxt-aos.

It will throw the error

Uncaught SyntaxError: The requested module '/_nuxt/@fs/D:/xxx/xxx/node_modules/lodash.debounce/index.js?v=d8618958' does not provide an export named 'default' (at aos.esm.js?v=d8618958:2:8)

[DaDoDev7]

I found this nuxt module which works https://github.com/egidiusmengelberg/nuxt-aos.

It will throw the error

Uncaught SyntaxError: The requested module '/_nuxt/@fs/D:/xxx/xxx/node_modules/lodash.debounce/index.js?v=d8618958' does not provide an export named 'default' (at aos.esm.js?v=d8618958:2:8)

does anybody have a solution for that ?

[klren0312]

I can use the following methods as normal

1. create src\plugins\aos.client.ts

import AOS from 'aos'
import 'aos/dist/aos.css'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      aos: () => AOS
    }
  }
})

2. add config to nuxt.config.ts

export default defineNuxtConfig({
  plugins: [
    { src: '~/plugins/aos.client', mode: 'client' }
  ],
}

3. init it in app.vue

<script setup lang="ts">
defineOptions({
  name: 'AppPage'
})
onMounted(() => {
   useNuxtApp().$aos().init()
  window.onresize = function () {
    setFontSize()
    useNuxtApp().$aos().refresh()
  }
})
</script>

[GeorgiKarchev1]

import AOS from 'aos';
onMounted(() => AOS.init());

This dont work

[GeorgiKarchev1]

I fukin try to import the fukin AOS in my Nuxt project i try everything and noting happens.

[IskandarAlex2]

running nuxt 3.7.4 seems to do just fine for me and AOS works perfectly although I need to add @types/aos as dev dependencies otherwise VSCode Typescript Intellisense will give false errors.

I should say though my Nuxt project also have other packages but I doubt any of them contribute to AOS working. AOS npm package version: ^2.3.4

my plugins/aos.client.ts

import AOS from 'aos'
import 'aos/dist/aos.css'

export default defineNuxtPlugin(() => {
  return {
    provide: {
      aos: () => AOS
    }
  }
})

plugins array in nuxt.config.ts

plugins: [
    { src: '~/plugins/aos.client', mode: 'client' }
  ],

because I only need this in my index.vue, I only put this in index.vue's <script setup lang="ts">

onMounted(() => {
   useNuxtApp().$aos().init()
  window.onresize = function () {
    useNuxtApp().$aos().refresh()
  }
})