Monaca Onsen UI Discord Chat Github Repo

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
    import App from './App.vue';
    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.

  • Try this to just see if it is working:


  • Onsen UI as per the documentation you need to use the object $ons.

  • Onsen UI 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';
    new Vue({
      el: '#app',
      template: '...',
      beforeCreate() {

  • @Fran-Diox Thanks. Your solution worked.