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.jsimport '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(); });
-
@nipun.kr as per the documentation you need to use the object
$ons
.
-
@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.