Created Lifecycle Hook of global vue instance

user_12181414 0
Viewed 645

I want to be able to use the AOS library globally on my vue project.

This is for Vue 2.

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

The Vue 3 sets up the app a little bit different.

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

I dont have that created option with the Vue 3 setup. I tried this, but it´s more of a guessing game...

createApp({App, AOS.init()})

But do I make this work in Vue 3?

vuejs2 vuejs3 vue.js lifecycle
2 Answers

You can still do that in Vue 3. Note h() is now imported as a global function from vue instead of being an argument of render().

Here's the equivalent Vue 3 code:

import { createApp, h } from 'vue'
import App from './App.vue'

createApp({
  created() {
    AOS.init()
  },
  render: () => h(App),
}).mount('#app')
user_62771510

You could use the created hook of the root component. To me that has always seemed like an appropriate place to initialize application-wide libraries.

user_38086670
Related