Onsen UI for Vue 2
alpha release

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.1.0 released . See all versions. Distributed free and open source (Apache 2.0) via GitHub

Star on GitHub

Create 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
Vue.use(VueOnsen);

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

This library is still an alpha version, but all components are implemented and fully working. We’d like to get your feedback to improve the API, so everyone can flawlessly start building mobile apps with Vue and Onsen UI!