Monaca - Onsen UI and Vue
-
Hello, I’ve seen that OnsenUI 2 supports VueJS, but monaca does not have a
Monaca - Onsen UI and Vueoption.Will it be implemented soon?
Thank you!
-
+1
-
Thanks for the suggestion.
We’ll definitely add the support, but please allow us to wait until Vue.js 2.0 is released :)
-
-
Is there an update on Monaca/Vue support?
-
@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.
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-cliseems like the recommended way to start a Vue project…https://github.com/vuejs-templates/webpack-simple
https://github.com/vuejs-templates/webpackI 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-cliis 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.
-
@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.jsandwebpack.prod.config.jsto use the same loaders and stuff as Vue-CLI. I think that should work when usingmonaca previewormonaca debug:)Also, modify
package.jsonto remove React/Angular2 dependencies and add Vue.js instead.
-
@munsterlander & @Fran-Diox Thanks, I will try it!
