How to initiate a Standard Javascript Callback in Vue.js

Question

How can I initiate this callback on Vue.js on page load?:

 lightGallery(document.getElementById('lightgallery')); 

Answer 1

One of Vue's life cycle hooks is beforeMount, Your code can be:

beforeMount(){
   lightGallery(document.getElementById('lightgallery')); 
},

Answer 2

Use the initialization in your vue component with lifecycle hooks:

Vue.component('lightGallery', function() {
  template: '<div>Place template markup here</div>',
  mounted: function() {
    $(this.$el).lightGallery(); 
  }
});

Then you can just use the component:

<lightGalleryr></lightGallery>

There are different lifecycle hooks Vue provide:

I have listed few are :

• beforeCreate: Called synchronously after the instance has just been initialized, before data observation and event/watcher setup.

• created: Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.

• beforeMount: Called right before the mounting begins: the render function is about to be called for the first time.

• mounted: Called after the instance has just been mounted where el is replaced by the newly created vm.$el.

• beforeUpdate: Called when the data changes, before the virtual DOM is re-rendered and patched.

• updated: Called after a data change causes the virtual DOM to be re-rendered and patched.

You can have a look at complete list here.

You can choose which hook is most suitable to you and hook it to call you function like the sample code provided above.