Onsen UI for Vue

Brings the Power and Simplicity of Vue.js to Hybrid and Progressive Web Apps
Try Kitchensink
Try Kitchensink
Get Started
Or use Onsen UI with...

Beautifully designed Vue Components that feel native

Onsen UI provides a wide variety of ready-to-use Vue Components that follow 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 on.

Building native-looking and high-performance apps has never been easier.

Try out our Vue kitchensink app, where you can play around with all the components. Then take a look the full list of Onsen UI Vue components to find out how to use them all!

Quick setup

Used Vue before, but no experience in using mobile UI frameworks? No problem. Getting started is super simple!

  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.

If you haven't used Vue before, take a look at our full Onsen UI for Vue guide.

# (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);

// That's it!
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 using Monaca. It is developed by the same team as Onsen UI, and helps to simplify complicated app development tasks. It has everything you need to develop Onsen UI apps, with powerful debugging, remote build, backend services and an optional cloud-based IDE.

Tons of resources & support

Ample documentation, interactive tutorials, guides, how-tos 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 Discord!

Let's Get Started