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.
Cordova + Vuejs + Onsen results in blank screen
tiagolr last edited by
I’m using the following template to start a new cordova + vuejs application:
The demo works fine on my android 4.0.4 device and browser.
After that i follow the tutorial from Vuejs + onsen announcement and merge the cordova + vuejs with onsen following this tutorial:
The application works fine in the browser but results on a blank screen on my android 4.0.4 device, and also emulator using android 4.0.3.
I’ve pinpointed the problem to occur if just import VueOnsen (even if I don’t use again), It also happens if I import any Onsenui component.
import VueOnsen from 'vue-onsenui'
I’m also using weiner remote debugging and there are no printed console messages, so I’m stuck and I really want to use vuejs + onsen for a new project.
Any Ideas? I tested the monaca js hello world and it also works without a problem in my android device.
@tiagolr That’s weird. Have you tried in other devices? Also, perhaps you can directly try this app in your device without the template you are using and see if it works.
tiagolr last edited by tiagolr
Thank you for your reply.
How should I go and try that app on my android device?
As far as I can see that’s only a vuejs app, how would you test the result build using cordova? As far as I know my approach of mixing vue-cordova-demo is not working.
PS - I also tested on an android emulator with the same results. On the other hand the monaca hello world works without a problem.
@tiagolr You need to put the built files in the
wwwfolder of a new Cordova project. I guess you can directly take the files from the gh-pages branch.
rags02 last edited by rags02
@Fran-Diox I’m getting the blank screen too (works fine in browser). Here’s a recap of how I went about it:
monaca create onsen-nav cd onsen-nav
Then to test it like you mentioned I pulled down the onsen navigation example from GitHub and…
npm install npm run build mv dist/* www/ cordova platform add ios --save cordova run ios --target="iPhone-6, 9.2"
Everything appears fine but then just a blank screen. I also gave it a shot with starting with
cordova create project org.foo.bar.app projectinstead of
@rags02 Thanks! Right now we are quite busy with the final release of Onsen UI but we’ll debug this when we have some time. Pinging @argelius as well :)
tiagolr last edited by tiagolr
Thank you @Fran-Diox, I only got time today to test your solution, unfortunately I still get the blank screen.
my procedure is:
1 - move gh-pages index.html and static folder to the www dir of a new cordova project.
2: cordova platform add android cordova run android
Edit - I tried both on my android 4.0.4 device and (4.4 i think) android emulator image with same results.