Flawless development with Vue, Monaca and Onsen UI

PhoneGap day US 2017

Masa Tanaka



Founder, Monaca

Tokyo, Japan



today's topic



Onsen UI



many frameworks!




jQuery (Vanilla JS)

Why vue.js?

Personal Favor

Reason #1

Developer Friendly

  • Keeping backwards compatibility.
  • Great documentation.
  • Incorporating goodies from React and Angular.

Reason #2

Designer Friendly

  • It can load with <script> tag (Webpack is optional).
  • Standard HTML template & syntax.
  • Less scary code.

Reason #3

Cordova on Vue

Hello vue!

$ npm install --global vue-cli
$ vue init OnsenUI/vue-cordova-webpack hello-vue


What is onsen ui?

  • A rich variety of UI components specially designed for mobile apps.
  • Full of ready to implement features with native iOS and Android design standards.
  • Free to use, 100% open source software.
  • Fine-tuned performance for Mobile Safari and Chrome.


Operating System

Native SDK

Your Logic

Operating System


Your Logic


Framework you love

温泉 (Onsen) = SPA!

Vue Kitchensink

Location: Jigokudani, Japan
Taken by Marsel van Oosten

web components!

CSS Components

Web Components

Framework Bindings

Framework bindings is required to support props and methods.

Written in pure JavaScript (ES2017).

All components are exposed as HTML elements.

TypeScript ready.

Written in pure CSS (cssnext, PostCSS)

framework agnostic

For Vanilla JS

framework agnostic

For Vue.js

framework agnostic

For React

framework agnostic

For Angular

For more details

Visit Onsen UI: https://onsen.io/

Explore community: https://community.onsen.io/

and share your effort!

tooling part

Monaca TOOLchain

what is monaca?

  • Cordova development suite on the Cloud.
  • Focus on pro and enterprise developers.
  • Enhanced Cordova features.

Monaca Debugger

  • Online & local debugging.
  • Live update on device.
  • Distributed via app stores.
  • Build your own debugger.
  • Cordova plugin support.

Remote build

  • All-in-one for iOS, Android and Windows.
  • iTunes Connect distribution automation.
  • All Cordova plugins are supported including hooks.

code encryption

  • Encryption, not obfuscation.
  • Encrypts entire assets.
  • Key can be supplied at runtime.
  • Binary code identification.

in-app updater

  • Update on-the-fly outside of the store.
  • Precise update control through API.
  • Can be hosted on premise.

Enterprise management PORTAL

  • Central management for iOS keys and Android KeyStores.


  • Manage developer seating, plug-in and continuous integration.

continuous integration

  • Automated build & deployment.
  • Support Git based systems + webhooks.
  • Test distribution to HockeyApp and DeployGate.

Security CheckER Tool

  • Cordova platform & native security analysis.
  • Detailed code based inspection.

local and online ide

Cloud IDE

Desktop App


  • Commercial subscription starting $20/month/developer.
  • USD payment starting next week.

free training & consultation

  • On-boarding support for organization customers.
  • Extended trial period.
  • Includes unlimited Cordova technical support during trial.

Catch me for details!

Relaxing mobile app dev with Onsen UI and Monaca!

Thank you!

Where to go next?

Contact me for any questions: masa@monaca.io

Onsen UI for Vue: documentation and tutorial

Sign up to Monaca for free trial

Slides available at: https://slides.com/masa-tanaka/pgday-2017-us/

Flawless development with Vue, Monaca and Onsen UI ♨️

By Masa Tanaka

Flawless development with Vue, Monaca and Onsen UI ♨️

PhoneGap Day US 2017

  • 1,167
Loading comments...

More from Masa Tanaka