website AOS not working in Nuxt

Hi, bro! I'm followed your steps with AOS, but not working. Can you help me?

Mar 26 '19 20:03 ddiegommachado

Me neither it does not seems to work ... plugin/aos.js

import Vue from 'vue'
import AOS from 'aos'

import 'aos/dist/aos.css'

Vue.use(AOS, {
  disable: 'phone'
})

nuxt 2.5.1

Mar 28 '19 19:03 jb-reynaud

Hi @ddiegommachado, @jb-reynaud. Sorry, I wasn't active. You may have already solved the issue by now haha 😅

Anyway, I changed my example for AOS. You can see the tutorial here and the working demo here.

These are the important parts:

// nuxt.config.js
export default {
  plugins: [{ src: "~/plugins/aos", ssr: false }],
}

// plugins/aos.js
import AOS from "aos";
import "aos/dist/aos.css";
export default ({ app }) => {
  app.AOS = new AOS.init({ disable: "phone" }); // or any other options you need
};

You don't need to import Vue in the plugin.

To see everything, just browse the repo. Hope this help!

Jun 19 '19 10:06 yasminzy

Hey @yasminzy , it's possible access AOS inside a component or page? I need run AOS.refresh() inside a page mount lifecycle and I don't know how. Any idea?

Jul 16 '19 09:07 gtso86

Hey @yasminzy your plugin works beautifully when i am in the development environment.

However, after running npm run generate and pushing my static build to production, i have an issue whereby the animation runs a single time and then the dom elements in question disappear entirely. Do you have any ideas?

Another tip for the tutorial from the nuxt docs, you may want to change ssr: false for mode: client.

Note: Since Nuxt.js 2.4, mode has been introduced as option of plugins to specify plugin type, possible value are: client or server. ssr: false will be adapted to mode: 'client' and deprecated in next major release.

Jul 23 '19 20:07 lukio3

ok my issue was a basic one; I am using purgecss and the dynamic AOS css was being removed in the production build!

Jul 23 '19 21:07 lukio3

For the kinds like me seeking for purgecss + aos:

        .pipe(purgeCSS({
            content: [paths.html.src],
            whitelist: ["aos-init", "aos-animate", "data-aos-delay", "data-aos-duration", "fade-(all used)", "fade-(fade types), ...]
        }))

You still have to parse either aos.css or _core.scss to get rid of unwanted delay and duration classes.

🍻 Cheers!

Feb 08 '20 09:02 Nastradoomus

ok my issue was a basic one; I am using purgecss and the dynamic AOS css was being removed in the production build!

Can you explain how you solved it? how did you make purgecss leave out AOS?

Mar 26 '20 14:03 afnineone

@afnineone using nuxtjs/purgecss put this in nuxt config. purgeCSS: { whitelist: [ "aos-init", "aos-animate", "data-aos-delay", "data-aos-duration", "fade-up", "fade-left", "fade-right", "flip-left", ], },

Apr 05 '20 23:04 Kaplaugher

I just had the same issue and solved it by importing aos.css outside of the js file. I added a scss file and added comments for purgecss to ignore aos css :

# assets/css/purgecss.scss
/*! purgecss start ignore */
@import '~aos/dist/aos';
/*! purgecss end ignore */

And then import this custom css either in one of your component, in the plugin, or directly in the css option of nuxt config.

Apr 17 '20 20:04 Uelb

This is what I am using right now. It's based on this article.

plugins/aos.js

import Vue from 'vue';
import AOS from 'aos';

Vue.use(AOS.init({
   // your settings here
}));

nuxt.config.js

plugins: [
   {
      src: '~plugins/aos.js',
      ssr: false,
   },
]

my_project_style.scss

@import 'aos/dist/aos.css';

I believe that the main difference from other responses from this thread is that I am importing aos.css on the project stylesheet, instead on the plugin file.

BTW, I saw that @yasminzy response is not importing Vue – like my code. Is that any improvement doing like that?

Apr 22 '20 20:04 hmaesta

@afnineone using nuxtjs/purgecss put this in nuxt config. purgeCSS: { whitelist: [ "aos-init", "aos-animate", "data-aos-delay", "data-aos-duration", "fade-up", "fade-left", "fade-right", "flip-left", ], },

that worked for me, thank you! :)

Jun 19 '20 12:06 afnineone

Nothing helps, animation plays while page is loading, then, when loaded, it stops and element with data-aos is hidden. Tried everything that you guys suggested above. Halp..

Aug 04 '20 09:08 maxpodufalov

Good morning, I have the same problem some solution @maxpodufalov

Nov 11 '20 21:11 Miguel3D

I think changing the load event works.

// nuxt.config.js
export default {
  plugins: [{ src: '~/plugins/aos.js', mode: 'client' }]
}

// plugins/aos.js
import "aos/dist/aos.css";
import AOS from 'aos'

const globalAOS = AOS.init({
   // note: your options here
    startEvent: 'load'
})

// trigger when the Nuxt page is ready
window.onNuxtReady(() => {
    AOS.refresh()
})

export default ({ app }) => {
    app.AOS = globalAOS
}