Onsen UI for Vue

Brings the Power and Simplicity of Vue.js to Hybrid and Progressive Web Apps.
Try Kitchensink
Get Started

Beautifully designed Vue Components that feels native

Onsen UI provides a wide variety of ready-to-use Vue Components that emulate iOS and Android UI guidelines and designs.

Simply pick out the elements you want in your app (like navigators, tabbar, lists, buttons... you name it) and they automatically show the iOS or Android look and feel according to the device they are running in.

Building native-looking and high-performance apps could never be easier.

See also: List of Vue Components | Kitchensink App

Simple setup

No experience in using mobile UI frameworks? No problem. Getting started is not complicated at all!

  • (1) Install our packages from the command line...
  • (2) ... and import vue-onsenui to your code...
  • (3) ... and write Vue.use(VueOnsen);

3 simple steps that will get you access to a wide range of UI components.

# (1) Install two packages
$ npm install onsenui vue-onsenui --save
// (2) Webpack CSS import
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

// (2) JS import
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';

// (3) And plug in the bindings
Vue.use(VueOnsen);

// Now you can use the awesome Onsen UI + Vue components
new Vue({
  el: '#app',
  template: '<v-ons-button>Click Me</v-ons-button>',
});

Reactive API tailored for Vue

Whether you are already a Vue developer or trying it out alongside Onsen UI for the first time, you will find that they play very well together.

Components of Onsen UI for Vue are designed to act reactively to received props.

We have an especially tailored API to fit all your needs.

<template>
  <v-ons-carousel :index.sync="carouselIndex"
    fullscreen swipeable auto-scroll overscrollable>
    <v-ons-carousel-item v-for="url in items">
      <img style="width:100%" :src="url">
    </v-ons-carousel-item>
  </v-ons-carousel>
</template>

<script>
export default {
  data() {
    return {
      carouselIndex: 0,
      items: [
        'http://placekitten.com/g/300/300',
        'http://placekitten.com/g/400/400',
        'http://placekitten.com/g/500/500'
      ]
    };
  }
};
</script>

Use with Vue CLI & hot reload, debugger, native plugins - all covered

You can get started with Onsen UI by using our templates within the Vue CLI. Pick the PWA or Cordova template and you're ready to go!

Beyond that, we’ve got full-stack tools to streamline your app development with zero-time setup. Onsen UI family’s Monaca CLI simplifies complicated tasks. Our development stack includes TypeScript, Webpack and Cordova, all integrated with app debugging features like live-reload on device, remote-build and many other cloud services.

Tons of resources & support

Ample documentation, interactive tutorials, guides, how-to and sample apps will get you up and running quickly and guide you to the finish line. When you need a hand, the Onsen UI team and the active community will help you via Community Forum and Gitter!

Let's Get Started