Aos: how to integrate with vue.js

[gantulgan]

I have html page with AOS animation. The page is complete static.
Then I tried to integrated to vue.js to dynamically change some text and html components.
But when add vue,js app then AOS stopped working.
Are there anyone who already figured out how to integrate AOS and VUE together?

[aozora]

Hi, I've created a little directive for Vue 2, I'm still working on this but the following code should work:
directives/aos.js:
`
import AOS from 'aos';
export default {
bind(el, binding, vnode) {
// add listener
AOS.init({
duration: 1200
});
},

// // When the bound element is inserted into the DOM...
// inserted(el, binding) {
// },

update(el, binding) {
AOS.refresh();
},

unbind(el, binding) {
// window.stroll.unbind(el);
}
};
`

to use it, add these line in main.js:

import aos from './directives/aos'; Vue.directive('aos', aos);

[aozora]

forgot, to use the directive apply it on the element container of the ones to be animated:
<div class="container" v-aos>

[molysama]

Doesn't work

[michalsnik]

This works for me:

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

new Vue({
  el: '#app',
  created () {
    AOS.init()
  },
  render: h => h(App)
})

[molysama]

oh, It works when I import css. Thank you!

[codejunkers1]

// main.js
import 'aos/dist/aos.css'

//App.vue
import AOS from 'aos'
export default {
created ( ) {
AOS.init()
}
}

[pvenableh]

Any advice on how to use this with nuxt.js as a plugin? I can't seem to get it to work.

[samrose3]

@pvenableh I had to import AOS after mounting so it had access to the window. Did this using lazy loading.

async mounted() {
  const AOS = await import('aos');
  AOS.init();
}

or without async/await

```js
mounted() {
import('aos').then(AOS => AOS.init());
}

[saeedhemmati]

Sorry, I don't know what you can do for your problem... On Saturday, May 26, 2018, 10:33:19 PM GMT+4:30, Sam Rose [e-mail] wrote:

@pvenableh I had to import AOS after mounting so it had access to the window. Did this using lazy loading.
async mounted() {
const AOS = await import('aos');
AOS.init();
}
or without async/await
mounted() {
import('aos').then(AOS => AOS.init());
}
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.

[Musbell]

@samrose3 Thanks. You safe my day :+1:

[PrimozRome]

@samrose3 I am also trying to use with nuxt.js. Tried importing AOS in the mounted method of my component, just like you, but the items with data-aos="fade" are not visible.

My code in the myComponent.vue:

import 'aos/dist/aos.css'
...
 mounted() {
    import('aos').then(AOS => AOS.init())
  }

Any idea?

[samrose3]

@PrimozRome my initial thoughts are that they are starting hidden and the fade in animation is never being triggered, causing them to stay hidden.

I would check which element is being scrolled on your page and ensure AOS is watching the correct scrolling container. I had this issue as well, just had to modify my AOS configuration

[qky1412]

What if I want disable AOS in some conditions? Currently using 'disable: true' will cause items stay hidden, 'cause the css is imported before, I dont't want control the 'data-aos' attribute or append a new class in global.

[Tes3awy]

I'd like to recommend is that you also add

AOS.refresh();

within the destroyed life-cycle hook.

[dekadentno]

Any advice on how to use this with nuxt.js as a plugin? I can't seem to get it to work.

Making it work with Nuxt:

1. make a js file in your plugins directory with the following content:

// aos.js
import Vue from 'vue';
import AOS from 'aos';
import 'aos/dist/aos.css';

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

1. include the file from step 1 in nuxt.config.jsin the pluginssection:

  plugins: [
    '~/plugins/aos.js',
  ],

[MuhaddiMu]

@dekadentno Thanks for sharing! That's working !!

[fliprubin]

@dekadentno's code is a good start, but it can break vue if you use anything other than false for the disable option. This is because when AOS is disabled, the AOS.init function returns undefined, and a vue plugin can't be undefined.

I also found I needed to use if (process.client) to prevent AOS from trying to do document queries on the node side.

Here's my modified version:

// aos.js
import Vue from 'vue';
import AOS from 'aos';
import 'aos/dist/aos.css';

const aosPlugin = {
  install: () => {
    AOS.init({
      // add your settings here
    })
  },
}

if (process.client) {
  Vue.use(aosPlugin);
}

For nuxt.config.js, it should be the same. If that doesn't work, you may want to try this instead:

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

Hope this helps future lurkers!

[MrSunshyne]

@fliprubin

Hope this helps future lurkers!

It absolutely did. Thanks

[purrplingcat]

The animation can be reset on an element which is animated when vue component updated. This caused deffect the element hide. I solved it with init Vue plugin (in Nuxt) in this way:

// ~/plugins/aos.js
import Vue from 'vue'
import AOS from 'aos'
import 'aos/dist/aos.css' // If ypu need load compiled AOS css here in plugin

class AosPlugin {
  config = {
    // Your AOS config here
  }

  install(Vue) {
    AOS.init(this.config)

    Vue.mixin({
      updated() {
        this.$nextTick(function () {
          AOS.refreshHard() // This is needed to avoid the un-animate aos effect
        })
      }
    })
  }
}

Vue.use(new AosPlugin())

You can probably use it in vanilla vue project, just register this plugin with Vue.use().

[MrSunshyne]

@purrplingcat would you have a solution for this problem in Nuxt by any chance as you seem to have been using aos with nuxt?
see this and all replies that follow.

I haven't been able to get it working till now. I tried the code snippet in your reply above, but i'm getting the same result. i.e when the site is generated, aos stops working.

will appreciate any hint. thanks !

[LindaOjo]

//index.html

  <head>
    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/>
  </head>
  <body>
        <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
        <script> AOS.init(); </script>
  </body>

I integrated AOS in Gridsome by adding the script and CDN above in my index.html. It worked for me

[SimonFricker]

I am having an issue where the AOS event is triggered twice. Once on the page init and then again once the page has been fully loaded. This only happens on the first load.