(この記事は Onsen UI チームの Júnio Silva が英語版 Monaca x Onsen ブログに投稿した Vue 2 binding alpha version is here! の翻訳です。)

Title

皆さんこんにちは。私は Onsen UI チームで最近インターンを始めた Júnio (ジュニオ)と言います。
私たちは、先日の記事でお伝えしたリリース日を守るため、Vue 2 バインディングの更新に日々取り組んできました。

この度 α 版をリリースできることを嬉しく思います。では、早速詳細をお伝えしていきたいと思います。

使い方

Onsen UI for Vue 2 は npm install vue-onsenui でインストールできます(Yarn でも構いません)。また、GitHub から直接入手することもできます。

次にそれを import VueOnsen from 'vue-onsenui'; で import してください。そして Vue.use(VueOnsen);VueOnsen プラグインをインストールしてください。

なお、以上の工程は VueOnsen UI のインストールが既に済んでいることを前提としています。もしお済みでない場合は、各ライブラリのインストール手順を参照してください。

より詳しい解説については、GitHub リポジトリにある README(英語) および
公式サイト(日本語) をご確認ください。

フィードバックのお願い

α 版での新機能の紹介の前に、素晴らしい Vue デベロッパーである皆さんに一つお願いをさせてください。
もし α 版をお試し頂けるなら、不具合報告や、機能改善のアイディア、API に対するご意見、コメント等を頂けると非常に幸いです。

そのための一番良い方法は、Gitter チャンネル(英語) で直接私たちとお話しして頂くことです。その他にも、コミュニティフォーラム(英語) または Stack Overflow(英語)onsen-ui タグでご質問いただけます(訳者注: 日本では Twitter: @Onsen_UI_ja にて開発チームへのご意見を、teratail の Onsen UI タグ にてご質問を受け付けております)。また、GitHub レポジトリ(英語)に Issue を立てていただくこともできます。皆さんからご意見を頂くために、窓口をたくさん用意しています 🙂

先日の記事でお伝えしたように(また、α 版であるゆえに)、私たちは β 版までにいくらかの破壊的変更を行うことができます。そのため、もし何かご提案いただけるなら、今が完璧なタイミングです。

What's new

先日の記事でお見せしたコンポーネントリストで言うと、現時点では(Lazy Repeat 以外の)全ての Vue コンポーネントが実装されています。また、各 Vue コンポーネントは Onsen UI Core の API をそのまま使えるように実装されています。

しかし、私たちはより洗練された API を提供したいと考えています。
そこで、API に Vue 固有の機能を実装していくことにしました。
まず、Vue ライクな構文で各コンポーネントを使えるようにしました。
あちらこちらで技巧を凝らす必要がありましたが、ひとまずの解決には至りました。

例えば、v-ons-input コンポーネントへの v-ons-model カスタムディレクティブの導入があります。Vue はチェックボックスやラジオボタンに対して特殊な処理を行うため、私たちは v-model ディレクティブを模した v-ons-model カスタムディレクティブを導入せざるを得ませんでした。CarouselTabbar に対する v-ons-index カスタムディレクティブにも同じことが言えます。

以上の件に関して、また他の実装に関して、現在私たちはドキュメントを準備中です。数日中には Onsen UI の Web サイトに公開できると思います(訳者注: 現在英語サイト・日本語サイトともに既にドキュメントを公開済みです)

Happy coding.

まとめ

Onsen UI for Vue 2 の今後にご期待ください。Let's make Vue-OnsenUI great again.


Onsen UI はハイブリッドアプリの UI 構築などに使えるオープンソースのライブラリです。詳しくは GitHub レポジトリ をご覧ください。Onsen UI が好きな方は、GitHub スターをつけるのをお忘れなく!★★★★★