この記事は、Vue.js連載の5本目です。

はじめに

こんにちは。山本竜玄です。

モバイルアプリ開発と聞いて、どのような技術を思い浮かべるでしょうか。iOSならSwift、AndroidならKotlinといったネイティブ開発や、FlutterやReact Nativeといったクロスプラットフォームフレームワークが主流です。実際、2025年のクロスプラットフォーム市場ではFlutterが42%、React Nativeが38%のシェアを占めています¹。

一方で、Vue.jsでもモバイルアプリ開発ができることをご存知でしょうか。Webフロントエンド開発で人気のVue.jsですが、モバイルアプリ開発のフレームワークも複数存在します。既存のVue.jsスキルを活かしてモバイルアプリを開発できるため、Vue.jsの経験者が多いチームでは選択肢となりえます。

本記事では、2025年秋時点でのVue.jsモバイルアプリ開発フレームワークの状況を整理します。プロダクション環境で使える安定したフレームワークから、トレンド技術まで、調べた内容を紹介します。

Vue.jsモバイル開発の全体像

クロスプラットフォーム開発市場は急成長しています。2025年の市場規模は124.5億ドルで、2032年には369.2億ドルに達する見込みです²。

この市場の中で、Vue.jsはWebフロントエンド開発の人気フレームワークとして、モバイル開発にも選択肢を提供しています。FlutterやReact Nativeと比較すると、Vue.jsモバイルフレームワークの市場シェアは小さいものの、既存のWeb開発者チームでの有識者が多い場合には、モバイルアプリ開発への敷居が低いことは大きなメリットです。

本記事では、Vue.jsでモバイルアプリを開発できるフレームワークを調査し、以下のように紹介しています。

主要フレームワーク（4つ）

• Ionic Vue
• Capacitor + Vue
• NativeScript-Vue
• Quasar Framework

これらは継続的にメンテナンスされており、GitHubでも活発な開発が確認できます。

中国市場向け（1つ）

• uni-app

中国のDCloudが開発しており、WeChatなどのミニプログラムとネイティブアプリを同時展開できます。中国国内では900万人の開発者が利用しているらしいです³。

新技術（1つ）

• Lynx + Vue

2025年3月にByteDanceが発表したフレームワークです。TikTokやCapCutの技術スタックから生まれました。Vue統合はプロトタイプ段階ですが、今後の動向は注目したいです。

メンテナンス終了（3つ）

• Weex
• Vue Native
• Onsen UI

これらは開発が停止してます。

主要フレームワーク

主要な4つのフレームワークを紹介します。これらはいずれもVue 3に対応しており、GitHubで継続的に開発されています。

Ionic Vue

Ionicは、Web技術でネイティブアプリを構築するフレームワークです。2013年にAngular向けにスタートし、現在はVue、React、Angularをサポートしています。

基本情報

• 最新バージョン: v8.7.6（2025年10月）
• ライセンス: MIT
• GitHub: 52,101スター（2025年10月時点）⁴
• npm: 週間18,911ダウンロード⁵
• 公式サイト: https://ionicframework.com/docs/vue/overview

特徴

• iOS、Android、Webの3プラットフォーム対応
• Capacitorによるネイティブ機能アクセス
• Vue 3とComposition API対応
• Material DesignとiOSデザインの両対応
• UIコンポーネントライブラリを提供

プロジェクト作成

Ionic CLIを使用することで、すぐに開発を開始できます。

npm install -g @ionic/cli
ionic start myApp tabs --type vue
cd myApp
ionic serve

Vue.jsとの違い

Ionic Vueは、通常のVue.jsプロジェクトにモバイルアプリ特有の機能を追加します。主な違いは以下の3点です。

1. IonicVueプラグインの追加（main.ts）

import { createApp } from 'vue';
import { IonicVue } from '@ionic/vue';
import App from './App.vue';
import router from './router';

/* Core CSS required for Ionic components to work properly */
import '@ionic/vue/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/vue/css/normalize.css';
import '@ionic/vue/css/structure.css';
import '@ionic/vue/css/typography.css';

/* Theme variables */
import './theme/variables.css';

const app = createApp(App)
  .use(IonicVue)
  .use(router);

router.isReady().then(() => {
  app.mount('#app');
});

2. IonRouterOutletの使用（App.vue）

IonRouterOutletは、複数のページを同じアウトレット内にレンダリングし、ページ遷移アニメーションとライフサイクルを管理します。

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script setup lang="ts">
import { IonApp, IonRouterOutlet } from '@ionic/vue';
</script>

3. @ionic/vue-routerの使用（router/index.ts）

Vue Routerをベースにしつつ、モバイルアプリ特有のページ遷移アニメーションとナビゲーションスタックを実現します。タブは個別のナビゲーションスタックとして扱われます。

import { createRouter, createWebHistory } from '@ionic/vue-router';
import { RouteRecordRaw } from 'vue-router';
import HomePage from '../views/HomePage.vue';

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    redirect: '/home',
  },
  {
    path: '/home',
    name: 'Home',
    component: HomePage,
  },
];

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes,
});

export default router;

ページコンポーネントの例

ページコンポーネントはIonPageをルート要素として使用します。以下はQuickstartで生成されるHomePage.vueの例です。

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content :fullscreen="true">
      <ion-header collapse="condense">
        <ion-toolbar>
          <ion-title size="large">Blank</ion-title>
        </ion-toolbar>
      </ion-header>
      <div id="container">
        <strong>Ready to create an app?</strong>
        <p>
          Start with Ionic
          <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components"
            >UI Components</a
          >
        </p>
      </div>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
</script>

collapse="condense"を使用すると、スクロール時に大きなタイトルが小さく折りたたまれるモバイル特有のUIを実現できます。

参考

• Ionic Vue Quickstart
• Ionic Vue Navigation
• Ionic Vue Overview

Capacitor + Vue

Capacitorは、既存のWebアプリをモバイルアプリに変換するためのランタイムです。Ionic VueもCapacitorを使用していますが、Ionic Vueが専用UIコンポーネントライブラリとセットになっているのに対し、Capacitor単体では既存のVue.jsアプリをそのままモバイル化できる点が特徴です。

基本情報

• 最新バージョン: v7.4.3（2025年10月）
• ライセンス: MIT
• GitHub: 14,200スター（2025年10月時点）⁶
• npm: 週間800,692ダウンロード⁷
• 公式サイト: https://capacitorjs.com/

特徴

• iOS、Android、Web、PWA対応
• 既存のVue.jsアプリをそのままモバイル化可能
• 35以上の公式プラグイン（Camera、Geolocation、Filesystemなど）
• Vite、Vue CLI、Nuxtなど主要ビルドツールに対応
• ネイティブコードとの共存が可能

プロジェクトへの追加

既存のVue.jsプロジェクトにCapacitorを追加する手順です。

npm install @capacitor/core @capacitor/cli
npx cap init [name] [id] --web-dir=dist

ビルド後、プラットフォームを追加します。

npm run build
npm i @capacitor/ios @capacitor/android
npx cap add android
npx cap add ios

Vue.jsでのネイティブAPI呼び出し

CapacitorのAPIは、Vue.jsのコンポーネント内でJavaScriptの標準的な非同期関数として呼び出せます。以下はGeolocation APIの例です。

import { Geolocation } from '@capacitor/geolocation';

const getCurrentPosition = async () => {
  const position = await Geolocation.getCurrentPosition();
  console.log('Current position:', position);
};

Camera APIを使った実装例です。

<script setup lang="ts">
import { ref } from 'vue';
import { Camera, CameraResultType } from '@capacitor/camera';

const imageUrl = ref('');

const capturePhoto = async () => {
  const photo = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  imageUrl.value = photo.webPath || '';
};
</script>

<template>
  <div>
    <button @click="capturePhoto">写真を撮影</button>
    <img v-if="imageUrl" :src="imageUrl" alt="撮影した写真" />
  </div>
</template>

参考

• Capacitor Documentation
• Using Capacitor with Vue
• Capacitor APIs

NativeScript-Vue

NativeScript-Vueは、WebViewを使用せず、真のネイティブUIコンポーネントでアプリを構築するフレームワークです。Vueのテンプレートは、iOSではUILabel、Androidではandroid.widget.TextViewといったネイティブコンポーネントに直接レンダリングされます。

基本情報

• 最新バージョン: v3.0.2（2025年10月17日）
• ライセンス: MIT
• GitHub: 5,900スター（2025年10月時点）⁸
• npm: 週間2,338ダウンロード⁹
• 公式サイト: https://nativescript-vue.org/

特徴

• iOS、Android対応
• WebViewを使用しない真のネイティブUI
• Vue 3完全対応（Options API、Composition API両対応）
• JavaScriptから全てのネイティブAPIに直接アクセス可能
• V8エンジンで実行される埋め込みJavaScript環境
• TypeScript対応の改善とモダンなプラグインシステム

プロジェクト作成

NativeScript CLIを使用してプロジェクトを作成します。

npm install -g nativescript
ns create myAwesomeApp --vue
cd myAwesomeApp
ns run ios
# または
ns run android

注: 2025年10月時点では--template @nativescript-vue/template-blank@latestの使用時にバージョン8.0.0が見つからない場合があります。その場合は--vueフラグを使用してください。

ネイティブUIコンポーネントの使用

NativeScript-Vueでは、Vueのテンプレート内でネイティブUIコンポーネントを直接使用します。以下はリスト表示の例です。

<template>
  <Page>
    <ActionBar title="NativeFlix" />
    <ListView height="100%" separatorColor="transparent" for="item in flicks">
      <v-template>
        <GridLayout height="280" rows="*, auto, auto" columns="*">
          <Image row="0" :src="item.image" />
          <Label row="1" :text="item.title" />
        </GridLayout>
      </v-template>
    </ListView>
  </Page>
</template>

<script>
export default {
  data() {
    return {
      flicks: [
        { id: 1, title: 'Movie 1', image: '~/assets/movie1.jpg' },
        { id: 2, title: 'Movie 2', image: '~/assets/movie2.jpg' },
      ]
    };
  }
};
</script>

ここで使用されているコンポーネントは以下の通りです。

• ActionBar: ページヘッダー
• ListView: スクロール可能なリスト
• GridLayout: グリッドレイアウトコンテナ
• Image: 画像表示
• Label: テキストラベル

これらは全てネイティブUIコンポーネントとしてレンダリングされ、WebViewのオーバーヘッドがありません。

参考

• NativeScript-Vue Getting Started
• Build a master-detail app with Vue

Quasar Framework

Quasarは、単一コードベースで複数プラットフォームに展開できるVue.jsフレームワークです。Web、モバイル、デスクトップアプリを同時に開発できる点が特徴で、エンタープライズ向けのフルスタックソリューションを提供します。

基本情報

• 最新バージョン: v2.18.5（2025年10月）
• ライセンス: MIT
• GitHub: 26,800スター（2025年10月時点）¹⁰
• npm: 週間156,502ダウンロード¹¹
• 公式サイト: https://quasar.dev/

特徴

• Web、iOS、Android、デスクトップ（Electron）、ブラウザ拡張機能対応
• 70以上のMaterial Design準拠のUIコンポーネント
• SSR、PWA、SPAに対応
• Capacitor/Cordovaによるモバイルアプリ化
• Vue 3とComposition API完全対応
• Viteベースの高速開発環境
• CLIツールによる統合開発体験

プロジェクト作成

Quasar CLIを使用することで、対話的にプロジェクトを作成できます。

npm create quasar
# または
yarn create quasar

対話形式で以下を選択します。

• App with Quasar CLI
• Quasar v2
• Vite（推奨）またはWebpack

グローバルCLIをインストールすると、コマンドを直接実行できます。

npm install -g @quasar/cli
quasar dev
quasar build

補足: 対話形式を避けたい場合や、既存のVue 3プロジェクトにQuasarを追加する場合は、以下の手動セットアップも可能です。

# Vue 3プロジェクトを作成 npm create vue@latest my-app cd my-app npm install # Quasarをインストール npm install quasar @quasar/extras npm install -D @quasar/vite-plugin sass # vite.config.tsとmain.tsを設定（詳細は公式ドキュメント参照）

モバイルアプリ化

QuasarはCapacitorまたはCordovaを使用してモバイルアプリに変換します。Capacitorを使用する例です。

quasar mode add capacitor
quasar dev -m capacitor -T android
quasar dev -m capacitor -T ios

Capacitorモードでは、Webアプリとして開発したコードがそのままモバイルアプリになります。

コンポーネントの使用例

Quasarのコンポーネントは、自動インポートに対応しているため、設定なしで使用できます。以下はカードとボタンを使用した例です。

<template>
  <q-page class="flex flex-center">
    <q-card class="q-pa-md" style="min-width: 350px">
      <q-card-section>
        <div class="text-h6">Quasar Framework</div>
        <div class="text-subtitle2">モバイルアプリ開発</div>
      </q-card-section>

      <q-card-section>
        <q-input
          v-model="text"
          label="テキスト入力"
          outlined
        />
      </q-card-section>

      <q-card-actions align="right">
        <q-btn
          label="送信"
          color="primary"
          @click="onSubmit"
        />
      </q-card-actions>
    </q-card>
  </q-page>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const text = ref('');

const onSubmit = () => {
  console.log('送信:', text.value);
};
</script>

レイアウトシステム

QuasarはFlexboxベースの12ポイントグリッドシステムを提供します。レスポンシブデザインに対応し、画面サイズに応じてレイアウトを自動調整できます。

<template>
  <div class="row">
    <div class="col-12 col-sm-6 col-md-4">
      <q-card>カード1</q-card>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <q-card>カード2</q-card>
    </div>
    <div class="col-12 col-sm-6 col-md-4">
      <q-card>カード3</q-card>
    </div>
  </div>
</template>

このコードは、小さい画面では縦に並び、中サイズ画面では2列、大きい画面では3列で表示されます。

参考:

• Quasar Framework
• Quasar CLI
• Developing Capacitor Apps
• Flex Grid

uni-app - 中国市場向けフレームワーク

uni-app

uni-appは、中国のDCloudが開発するクロスプラットフォームフレームワークです。ネイティブアプリに加えて、WeChatやAlipayなどのミニプログラム（小程序）に対応している点が最大の特徴です。

基本情報

• 開発元: DCloud
• ライセンス: Apache 2.0
• GitHub: 40,300スター（2025年1月時点）¹²
• 開発者数: 900万人以上
• 月間ユーザー数: 12億人のモバイルユーザー¹³
• 公式サイト: https://en.uniapp.dcloud.io/

特徴

• iOS、Android、HarmonyOS Next対応
• Web（レスポンシブ）対応
• ミニプログラム対応（WeChat、Alipay、Baidu、Douyin、Larkなど）
• Vue.js構文ベース
• WeChatミニプログラムAPIとの互換性
• 条件付きコンパイルによるプラットフォーム別対応
• ネイティブレンダリング対応

なぜ中国で人気なのか

中国市場では、WeChatやAlipayなどのスーパーアプリ内で動作するミニプログラムが普及しています。uni-appは、ミニプログラムとネイティブアプリを単一コードベースで開発できるため、中国市場向けアプリ開発で広く採用されているようです。

参考

• uni-app Official Website
• uni-app History

Lynx + Vue

Lynx

Lynxは、ByteDanceが2025年3月5日にオープンソース化したクロスプラットフォームフレームワークです。TikTokのSearch、Shop、Live機能や、TikTok Studioアプリの開発に使用されている実績があり、ByteDanceの技術スタックから生まれた注目のフレームワークです。

基本情報

• 開発元: ByteDance
• 発表日: 2025年3月5日
• GitHub: 13,300スター（2025年10月時点）¹⁴
• 最新バージョン: v3.4.2（2025年10月9日）
• コミット数: 2,104件
• 貢献者: 82人
• 公式サイト: https://lynxjs.org/

特徴

• iOS、Android、Web対応（OpenHarmony、macOS、Windowsは開発中）
• Rust製の高速レンダリングエンジン
• デュアルスレッドアーキテクチャによる高性能
• フレームワーク非依存設計（React、Vue、Svelteなどに対応）
• PrimJS（QuickJSベース）によるJavaScript実行環境
• 初回フレーム描画の高速化（2〜4倍高速と報告）

Vue統合の状況

Lynxはフレームワーク非依存の設計で、現在はReactLynxが公式に提供されています。ByteDance社内では、Lynxの約半分のプロジェクトでReact以外のフレームワーク（VueやSvelte）が使用されています¹⁵。

Vue.jsの創設者であるEvan Youは、Xでの投稿で以下のように述べ、Vue統合への支援を表明しています¹⁶。

https://x.com/youyuxi/status/1898663514581168173

Lynx発表から、VueコミュニティのメンバーであるRahul Vashishthaがプロトタイプ開発を開始しました。2025年10月時点では、Vue統合はまだプロトタイプ段階であり、正式なリリースには至っていません。

2025年のロードマップ

Lynxチームは2025年に5つの安定版リリースを計画しています¹⁷。

• v3.2（2025年4月）: リリース済み
• v3.3（2025年6月）: リリース済み
• v3.4（2025年10月）: リリース済み、OpenHarmonyサポート
• v3.5（2025年10月）: macOS、Windowsサポート
• v3.6（2025年12月）: 予定

機能面では、input要素、ViewPager、Swiper、SVGサポート、Canvas API、Lottieアニメーション、通知、位置情報などの追加が計画されています。

現状の制約

2025年10月時点で、Lynxには以下の制約があります。

• エコシステムがまだ未成熟
• サードパーティライブラリの不足
• ドキュメントとチュートリアルが限定的
• 標準HTML要素（button、input）非対応（代わりに<view>, <text>, <image>などの独自要素を使用）
• 既存ネイティブアプリへの統合が前提（スタンドアロンビルド非対応）

エコシステムがまだ未成熟であり、開発チームは既存アプリへの段階的な統合を推奨しています。新規アプリをゼロから開発する用途には、エコシステムの成熟を待つことが推奨されます¹⁸。

ByteDanceの技術力と投資規模を考えると、Vue.jsとモバイルアプリの目線でもLynxの将来性は注目に値します。

メンテナンス終了したフレームワーク

かつて使われていたフレームワークですが、現在は開発が停止しています。新規プロジェクトでの採用は推奨しません。

Weex（開発終了）

Weexは、Alibabaが開発したクロスプラットフォームフレームワークで、VueとRaxの構文でモバイルアプリを構築できました。2016年にオープンソース化され、2017年からApache Incubatorプロジェクトとして開発されていましたが、2021年5月にApacheから引退し、開発が事実上停止しています¹⁹。

• GitHub: 13,800スター（アーカイブ化）
• 最終コミット: 4年前（2021年頃）
• 現状: Apache incubator-weexリポジトリはアーカイブ化

Vue Native（非推奨）

Vue Nativeは、React Native上でVue.js構文を使用できるようにしたフレームワークです。Vue.jsのコードをReact Nativeコードに変換する仕組みでしたが、2021年11月に正式に非推奨化されました²⁰。

• 開発元: GeekyAnts
• 非推奨化: 2021年11月
• 理由: メンテナンス継続が困難

Onsen UI（限定的メンテナンス）

Onsen UIは、PWAとハイブリッドアプリ向けのUIフレームワークで、Vue、React、Angularのバインディングを提供しています。Web Componentsベースで設計されており、Cordovaと組み合わせて使用します²¹。

• GitHub: OnsenUI/OnsenUI（最終コミット約1年前）
• Vue 3対応: 公式ドキュメントあり
• 現状: 限定的なメンテナンス

メインリポジトリは2023〜2024年頃まで更新がありましたが、活発な開発は行われていません。

まとめ

本記事では、2025年秋時点でのVue.jsモバイルアプリ開発フレームワークの状況を調べて整理しました。

Vue.jsでのモバイルアプリ開発には、想像以上に豊富な選択肢があります。Ionic Vue、Capacitor、NativeScript-Vue、Quasarの4つの主要フレームワークは、いずれも継続的にメンテナンスされており、プロダクション環境での利用に適しています。中国市場向けにはuni-app、最近のトレンドや将来性としてはLynxという選択肢も存在します。

FlutterやReact Nativeと比較すると市場シェアは小さいものの、既存のVue.jsチームがモバイルアプリ開発に参入する際の敷居は低く、学習コストを抑えられる点が大きなメリットです。

2024〜2025年のVue.jsエコシステムの進化（Vue 3.5のメモリ削減とパフォーマンス改善、Vite 6.0のリリース、Nuxt 4の正式版）は、モバイルアプリ開発にも好影響を与えています。特にVue 3.5のメモリ使用量56%削減と配列操作の高速化は、リソース制約のあるモバイル環境で効果を発揮します。

Vue.jsモバイルアプリ開発の選択肢は今後も拡大していくでしょう。特にLynxのような新技術や、PWA/ハイブリッドアプローチの進化に注目です。

参考リソース