3. Cordova + Vuejs + Onsen results in blank screen

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

  • T

    I’m using the following template to start a new cordova + vuejs application:

    https://github.com/kartsims/vue-cordova-demo

    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:

    https://onsen.io/blog/preview-vue-support-onsen-ui/

    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.

    Thank you,

    0 1 Reply
  • Onsen UI

    @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.

    0
  • T

    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.

    Thank you.

    0 1 Reply
  • Onsen UI

    @tiagolr You need to put the built files in the www folder of a new Cordova project. I guess you can directly take the files from the gh-pages branch.

    0
    R
     1 Reply
  • R

    @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 project instead of monaca ....

    Thoughts?

    0 1 Reply
  • Onsen UI

    @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 :)

    0
  • T

    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.

    0