Onsen UI for Vue.js

Create hybrid and mobile apps with Onsen UI and Vue.js

We have created a small set of bindings that make it easier to integrate Onsen UI into Vue apps. Onsen UI is a component library for creating hybrid apps built on top of Web Components. With this library we extend the Onsen UI components so they work well when used inside a Vue app.

Available on npm

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

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

npm install --save onsenui vue-onsenui

Easy to use

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

import Vue from 'vue';

import VueOnsen from 'vue-onsenui';
import ons from 'onsenui';

Vue.use(VueOnsen);

ons.ready(() => {
  /* eslint-disable no-new */
  new Vue({
    el: 'body',
    components: { App }
  });
});

This exposes some utility functions that make it easier to control the Onsen UI components.

Learn more

We have published an article where you can learn how to use the library. We have also created an app that showcases most of the Onsen UI components.

• Preview! Vue.js support for Onsen UI
• Kitchensink example
• GitHub repository

This library is still an early preview but we are planning to add more features and also publish more documentation so everyone can start building mobile apps with Vue and Onsen UI!