Table of contents

VueJS

How to use Metro UI 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 UI + VueJS

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

To work with VueJS You must do the following:

  1. Add meta tag of late initialization Metro UI <meta name="metro4:init" content="false">
  2. Initialize Metro UI in the hook mounted
    
                                var app = new Vue({
                                    el: '#app',
                                    data: {
                                    },
                                    mounted: function () {
                                        Metro.init();
                                    }
                                })
                            

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