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.

Monaca - Onsen UI and Vue



  • Is there an update on Monaca/Vue support?


  • Onsen UI

    @chrisa It’s still work in progress. Right now we are fixing some important bug in the Custom Elements polyfill we use and right after that the priority will be Vue :)



  • +1 - would love more documentation on how to use Monaca with Vue :)



  • @quang A lot of the basics with Vue can be accomplished without needing Onsen bindings. I know the team is hard at work integrating Vue and I know there has been discussion regarding Vue 2 and how best to make this all integrated. I would ask what documentation do you seek and if I am able to accommodate, maybe I can throw together an example for some basics? I have used view for 2 way binding and repeating lists, but beyond that, I have not gone to crazy with it as I am a tried and true vanilla junkie!



  • Hey @munsterlander that’ll be amazing! Thanks.

    So I guess my question is more related to tooling. Mainly how to integrate webpack/vue-loader/vue-router with Monaca. Currently I was going to use a custom UI so no Onsen yet.

    My related monaca-lib question: https://github.com/monaca/monaca-lib/issues/87

    I’m new to Monaca, and hybrid development. So I guess I don’t see how to hookup webpack+vue-loader (to build the .vue files) and have it turn into an iPhone app?

    Seems like there’s a transpile step somewhere… I think I’m missing something. :)

    Thanks! any help would be appreciated.

    quangv created this issue in monaca/monaca-lib

    closed isTranspilable vue.js ? #87



  • @quang Ok, well I have never used webpack so I am of no help there! Sorry! I am working up a vue 2 integration codepen right now though. I should have it finished within moments but it is a very very basic example.

    Edit: Ok, here is a very basic example using binding and loops with a list:

    https://codepen.io/munsterlander/pen/rWWvNN



  • I’m very new to Vue.js as well.

    Using vue-cli seems like the recommended way to start a Vue project…

    https://github.com/vuejs-templates/webpack-simple
    https://github.com/vuejs-templates/webpack

    I was pretty impress with what came out of the box with vue create... and was hoping to combine it with the equally impressive Monaca debugging tools. ;)

    So I started this project with the Blank, No Framework Monaca template. Assuming there will be more Vue.js templates in the future especially since Onsen + Vue 2.0

    I read that monaca-cli is webpack under the hood? Maybe there’s a way to hook things up…



  • @quang I am sure that @Andi or @Fran-Diox will be able to answer those questions. I usually like more granular control so I add my own files. To add Vue.JS to a barebones project, I just add this single line to the head of the index.html:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.7/vue.min.js" />
    

    For final product apps, I just download the file and make the path absolute.


  • Onsen UI

    @quang Monaca only uses webpack for React and Angular 2 projects. It’s not needed for Vanilla or AngularJS so it’s not included. It will work when we include Vue templates but for now maybe you can simply create a React/Angular2 minimum template and modify webpack.dev.config.js and webpack.prod.config.js to use the same loaders and stuff as Vue-CLI. I think that should work when using monaca preview or monaca debug :)

    Also, modify package.json to remove React/Angular2 dependencies and add Vue.js instead.



  • @munsterlander & @Fran-Diox Thanks, I will try it!