Onsen UI for Vue 2

ハイブリッドアプリ開発を速く、シンプルに。現在 α 版を提供中。
はじめよう
Onsen UI for Vue 2
他のフレームワークでも...

Latest 2.4.2 released . See all versions. Distributed free and open source (Apache 2.0) via GitHub

GitHubスターをお願いします

Onsen UI と Vue 2 でハイブリッドアプリやモバイルWebアプリを開発しよう

Onsen UI を Vue 2 で使いやすくするためのバインディングを作成しました。Onsen UI は Web Components に準拠した、ハイブリッドアプリ開発のためのライブラリです。

入手方法

このバインディングは NPM にて公開されています。利用するためには、Onsen UI コアライブラリも必要です。

アプリに組み込むには、下記のように yarn コマンドを用いてプロジェクトに加えてください。

yarn add onsenui vue-onsenui # または npm install onsenui vue-onsenui --save

また、直接 onsenuivue-onsenui をダウンロードすることもできます。

アプリへの組み込み

ライブラリは Vue プラグインとして配布されているため、下記のように簡単にアプリで使用できます。

/**
 * webpack または link タグで
 * スタイルシートを読み込み
 */
import 'onsenui/css/onsenui.css';
import 'onsenui/css/onsen-css-components.css';

// Vue 2 をインポート
import Vue from 'vue';

// Onsen UI コアライブラリと Vue 2 バインディングをインポート
import 'onsenui';
import VueOnsen from 'vue-onsenui';

// Vue 2 バインディングをプラグインとして適用
Vue.use(VueOnsen);

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App }
});

これにより Onsen UI が持つ全てのカスタム要素が <v-ons-*> というコンポーネント名で使えるようになります。また、プラットフォーム別処理や簡易アラートダイアログ表示を行えるユーティリティ関数も使えるようになります。

詳細

ライブラリの使い方は、下記のドキュメントに記述しています。また、多くの Onsen UI コンポーネントを組み込んだサンプルアプリも提供しています。

このライブラリは α 版の段階ですが、既に全てのコンポーネントを実装済みです。 皆さんからのフィードバックを元に、Vue 2 と Onsen UI を使ったモバイルアプリ開発を強力にサポートしていきます。 API へのフィードバックは Twitter (@Onsen_UI_ja) にて受け付けております。