Monaca - Onsen UI and Vue



  • Hello, I’ve seen that OnsenUI 2 supports VueJS, but monaca does not have a Monaca - Onsen UI and Vue option.

    Will it be implemented soon?

    Thank you!



  • +1


  • Monaca

    Thanks for the suggestion.
    We’ll definitely add the support, but please allow us to wait until Vue.js 2.0 is released :)



  • Thanks @Masa!
    Will it come with vueify?



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


Log in to reply