Onsen UI for Vue 2

Power of Vue.js to create hybrid & mobile web apps with Onsen UI.
Get Started
with Onsen UI for Vue 2
Also available for...

Latest 2.4.2 released . See all versions. Distributed free and open source (Apache 2.0) via GitHub

Star on GitHub

Create Cordova based hybrid mobile apps with Onsen UI and Vue 2

Integrating Onsen UI with Vue 2 is now really simple. Vue bindings for Onsen UI provides a Vue-like API to interact with Onsen UI elements in the shape of Vue components and directives. All the power of Onsen UI is now available for your Vue.js apps.

Installing Vue bindings for Onsen UI

The bindings are available on NPM. To use them you also need the core Onsen UI library.

Therefore, to install the library in your app all you need to do is:

yarn add onsenui vue-onsenui # Or use npm

It is also available from Unpkg CDN: core and bindings.

Easy to use

The library is distributed as a Vue plugin so you can easily add it to your application:

 * The stylesheets can be loaded with Webpack
 * or added with link tags.
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

// Import Vue
import Vue from 'vue';

// Import Onsen UI core and Vue bindings
import 'onsenui';
import VueOnsen from 'vue-onsenui';

// And just plug the bindings

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }

This exposes all the Onsen UI custom elements as <v-ons-*> components as well as some utility functions for platform recognition and creating quick alert dialogs.

Learn more