Vuejs - When should jquery plugins be initialised

Question

I have some JQuery plugins that need initialising, normally this could be done using $(document).ready(function () { }) but this doesn't appear to work when doing it within a vue components created event. With this in mind, I've made use of this.$nextTick(function () { }) but this doesn't seem to work with elements that are introduced on child component. For instance, I do this:

created: function () {
  this.$nextTick(function () {
    window.materialadmin.AppOffcanvas.initialize()
  })
}

I have a button which is introduced in a child component but the onclick handler this above code attaches doesn't trigger. If I do:

setTimeout(function () {
    window.materialadmin.AppOffcanvas.initialize()
}, 1000)

Then my click handler will be bound and work.

At what point is the correct point to bind my events so that I don't need to rely on setTimeout which is hacky?

Answer 1

mounted or updated Lifecycle-Hooks should solve your problem as mounted is called after the instance has just been mounted where el is replaced by the newly created vm.$el and updated is called after a data change causes the virtual DOM to be re-rendered and patched.