Liam de Beasi氏は先頃、Vue3の新機能を活用するIonic FrameworkのネイティブVueバージョンであるIonic Vueをリリースした。昨年リリースされたIonic Reactに続き、Ionic Vueは、WebコンポーネントベースのIonic 4 (コードネーム Ionic for Everyone) で設定されたビジョンの実現における一歩である。
De Beasi氏は、Ionic VueがIonicチームのビジョンにどのようにフィットするかを次のように要約した:
Ionic Vueのリリースは、どのWeb開発者も、選択したフレームワークを使用して、IonicFrameworkでパフォーマンスの高いクロスプラットフォームアプリケーションを構築できることを示しています。
Ionic Vueは、Vueの公式ルータ (vue-router) に基づいて構築され、いくつかのカスタムAPIで拡張されている。パッケージ (@ionic/vue-router) は次のように使用できる:
import { createRouter, createWebHistory } from '@ionic/vue-router';
import Home from '@/views/Home.vue'
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes: [
{
path: '/',
redirect: '/home'
},
{
path: '/home',
name: 'Home',
component: Home
},
{
path: '/lazy',
component: () => import('@/views/Lazy.vue')
}
]
})
リリースノートには、Ionic Vueを使用する際に注意すべき追加の違いが記載されている。開発者は、トランジションとライフサイクルイベントが期待どおりに機能するように、Ionicページを<ion-page>コンポーネントにラップする必要がある。開発者は、Ionic固有のライフサイクルイベント（ionViewDidEnter、ionViewDidLeaveなど）を使用できる。@ionic/vueは、ion-virtual-scrollを除くすべてのIonicFrameworkコンポーネントをサポートする。
De Beasi氏は、Ionic Vueの次のステップを要約した:
次は何でしょうか ? 改善されたVetur/Intellisenseサポートをまもなく提供します。さらに、完全なサーバサイドレンダリング (SSR) サポートの提供に取り組んでいます。それをテストする方法については、Ionic Vue SSRブログに注目してください !
開発者は、Ionic CLIのインストールとそれを使用してIonic Vueスターターアプリケーションを作成することで、Ionic Vueの使用を始められる:
npm install -g @ionic/cli@latest
ionic start my-vue-app --type vue
開発者は、JavaScriptまたはTypeScriptを使用してIonic Vueアプリケーションを作成できる。ただし、JavaScriptを使用するには、コマンドラインインターフェイスによって生成されたアプリケーションテンプレートを手動で修正する必要がある。
開発者は、Ionic VueをCapacitorと一緒に使用して、ネイティブモバイルアプリケーションを開発できる。リリースノートには、2つのCapacitor API (CameraとFilesystem) の使用例が記載されている。
Ionic Frameworkは、開発者がネイティブiOS、ネイティブAndroid、およびWeb用の高品質のモバイルアプリを構築するのに役立つオープンソースのUIツールキットである。Ionic Frameworkは、MITライセンスの下で利用可能なオープンソースソフトウェアである。貢献とフィードバックは、Ionic GitHubプロジェクトによって奨励されており、Ionic貢献ガイドラインと行動規範に従う必要がある。