Monaca - Onsen UI and Vue

[rogervila]

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!

[chrisa]

+1

[Masa]

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

[rogervila]

Thanks @Masa!
Will it come with vueify?

[chrisa]

Is there an update on Monaca/Vue support?

[Fran Diox]

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

[quang]

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

[munsterlander]

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

[quang]

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

[munsterlander]

@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

[quang]

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…

[munsterlander]

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

[Fran Diox]

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

[quang]

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