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.