Onsen UI for Vue

Vue.jsを使ったモバイルアプリ開発用UIフレームワーク
サンプルアプリ
はじめよう

ネイティブのようなスムーズをHTML5で実現

Onsen UIにはiOSとAndroidのUIガイドラインを忠実に再現したUIコンポーネントが数多く含まれています。

ナビゲーターやリスト、タブバーなど必要なコンポーネントを組み込むだけで、自動的に実行中のデバイスを判別して、ネイティブUIを表示します。

Onsen UIを使うと高品質サクサク動くモバイルアプリを簡単に開発できます。

Onsen UI for Vueのコンポーネントの一覧はこちらから。

簡単なセットアップ

モバイルUIフレームワークははじめてですか?大丈夫です。下記の3ステップで簡単に組み込めます。

  • (1) NPMを使ってパッケージをインストールします...
  • (2) ... そしてプログラムコードにimportして...
  • (3) ... Vue.use(VueOnsen);と書くだけです!

この3つのステップですべてのコンポーネントにアクセスできるのです。

# (1) パッケージをインストールします
$ npm install onsenui vue-onsenui --save
// (2) WebpackのCSSインポート
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

// (2) JSのインポート
import Vue from 'vue';
import VueOnsen from 'vue-onsenui';

// (3) そして使用します
Vue.use(VueOnsen);

// これでVueテンプレートでOnsen UIを使用できます!
new Vue({
  el: '#app',
  template: '<v-ons-button>Click Me</v-ons-button>',
});

Vueに合わせたリアクティブなAPI

Onsen UIのAPIはVueととても親和性が高く、開発効率をあげてくれます。

Onsen UI for Vueのコンポーネントは、Propsを用いたリアクティブな設計になっています。

すべてのAPIはVue向けにカスタマイズされています。

<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>

CLI、ホットリロード、デバッガーなど、すべての開発ニーズに対応

Vue CLIを使ってOnsen UIの開発をはじめましょう。PWAやCordova対応のテンプレートを提供しています。

さらに、すばやく開発環境を整えるためのツールが揃っています。Onsen UIファミリーであるMonaca CLIを使うと、複雑な作業もシンプルに。TypeScript、Webpack、Cordovaといったツールから、端末上でのライブリロードやリモートビルドなど、多くの機能が提供されます。

豊富なリソースとサポート

充実したドキュメント、チュートリアル、ガイド、サンプルアプリなど、必要なリソースが揃っています。お困りの際はフォーラムGitterなどで、Onsen UIチームやコミュニティが支援してくれるでしょう!

早速はじめよう!