Monaca Onsen UI Discord Chat Github Repo

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:

    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:

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

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

    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="" />

    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 and 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!