AOS not working in Nuxt

ddiegommachado commented 5 years ago

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

jb-reynaud commented 5 years ago

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

yasminzy commented 5 years ago

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!

gtso86 commented 5 years ago

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?

lukio3 commented 5 years ago

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.

lukio3 commented 5 years ago

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

Nastradoomus commented 4 years ago

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!

afnineone commented 4 years ago

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?

Kaplaugher commented 4 years ago

@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", ], },

Uelb commented 4 years ago

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.

hmaesta commented 4 years ago

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?

afnineone commented 4 years ago

@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! :)

maxpodufalov commented 4 years ago

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..

Miguel3D commented 3 years ago

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

aaronwaldon commented 3 years ago

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
}