ons.disableAutoStyling() now working (Solved)



  • Hi,

    I have just started using onsen UI.

    I used monaca cli to create me OnsenUI with Vue2 tabbar template.
    Everything is working fine but for some reason I can’t turn off the MD styling for android.

    The problem I am facing is that I am getting that I am getting

    “Uncaught ReferenceError: ons is not defined.”

    I have tried adding ons.disableAutoStyling() at two locations
    Code for main.js

    import 'onsenui';
    import Vue from 'vue';
    import VueOnsen from 'vue-onsenui';
    ons.disableAutoStyling(); //Not Working
    
    // Onsen UI Styling and Icons
    require('onsenui/css-components-src/src/onsen-css-components.css');
    require('onsenui/css/onsenui.css');
    import App from './App.vue';
    Vue.use(VueOnsen);
    new Vue({
      el: '#app',
      template: '<app></app>',
      components: { App }
    });
    

    Code for index.html

    <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> <meta http-equiv=Content-Security-Policy content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'"> <script type=text/javascript src=components/loader.js></script> <link rel=stylesheet type=text/css href=components/loader.css> <link href=app.css rel=stylesheet></head> <body> <div id=app></div> <script type=text/javascript src=vendor.bundle.js></script><script type=text/javascript src=app.bundle.js></script> <script>ons.disableAutoStyling();</script> </body> </html>
    

    Even when I am trying to debug it on my android phone I get ons undefined error. Please help as I plan to use IOS styling only.



  • @nipun.kr Try this to just see if it is working:

    ons.ready(function(){
      ons.disableAutoStyling();
    });
    

  • Onsen UI

    @nipun.kr as per the documentation you need to use the object $ons.


  • Onsen UI

    @nipun.kr Hi! Two things:

    • It must be used before any component is rendered (otherwise the autostyling will affect those components).
    • In Vue bindings, $ons object is available in Vue’s prototype for every vm.

    Basically, this should work:

    import Vue from 'vue';
    import VueOnsen from 'vue-onsenui';
    
    Vue.use(VueOnsen);
    
    new Vue({
      el: '#app',
      template: '...',
      beforeCreate() {
        this.$ons.disableAutoStyling();
      }
    });
    
    


  • @Fran-Diox Thanks. Your solution worked.


Log in to reply