VueJS

How to use Metro 4 with VueJS framework.

About VueJS

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. More about VueJS you can read in this guide.

Metro 4 + VueJS

VueJS performs manipulation with the DOM during its initialization, so when using this framework in conjunction with Metro 4, there are nuances.

To work with VueJS You must do the following:

1. Add meta tag of late initialization Metro 4 <meta name="metro4:init" content="false">
2. Initialize Metro 4 in the hook mounted

   
                               var app = new Vue({
                                   el: '#app',
                                   data: {
                                   },
                                   mounted: function () {
                                       Metro.init();
                                   }
                               })
                           

Example: https://codepen.io/olton/pen/zWomRo