ons.disableAutoStyling() now working (Solved)

nipun.kr

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.

munsterlander

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

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

misterjunio

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

Fran Diox

@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();
  }
});

nipun.kr

@Fran-Diox Thanks. Your solution worked.

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

ons.disableAutoStyling() now working (Solved)