メインコンテンツにジャンプする
チュートリアル

Capacitor 8 を使用して Nuxt アプリを iOS & Android に変換する

既存の Nuxt 4 ウェブアプリケーションを Capacitor 8 を使用して iOS と Android のネイティブモバイルアプリケーションに変換するための完全ガイド。静的生成の設定、ネイティブプラグインの追加、アプリストアへのデプロイまで、すべてをカバーします。

記事のクレジット

マーティン・ドナディュー

ライター

バレリア

レビュアー

ジョーダン

エディター

Convert Your Nuxt App to iOS & Android with Capacitor 8

導入

既存のNuxt Webアプリがある場合、このガイドでは、Capacitorを使用してiOSおよびAndroidモバイルアプリに変換する方法を学びます。 Capacitor 8 — 最新バージョンでパフォーマンスが向上し、新機能が追加されました。

Capacitor wraps your web app in a native container, giving you access to device APIs like camera, filesystem, and push notifications while keeping your existing Vue codebase. Unlike Flutter or React Native, you don’t need to rewrite anything — your Nuxt code runs as-is.

学ぶこと:

  • 既存のNuxtアプリを静的生成用に設定する
  • Capacitor 8にエッセンスのネイティブプラグインを追加する
  • iOSとAndroidのシミュレータでビルドとテストする
  • 開発を高速化するためにライブリロードを有効にする
  • iOSの一般的なレイアウト問題 (ビュー ポート、セーフ エリア、水平オーバーフロー) を修正する
  • Capgo Native NavigationとTransitionsを使用してネイティブフィーリングのUIを追加する

新しいプロジェクトから始めることを検討している場合は、以下のガイドを参照してください。 Nuxtモバイルアプリをゼロから構築する.

NuxtとCapacitorの使用による利点

  • Codeの再利用性: VueコンポーネントとロジックをWebアプリとモバイルアプリ間で共有する
  • パフォーマンス: Nuxtの静的生成は、モバイル向けに最適化されたバンドルを作成します。
  • ネイティブ機能: Capacitor プラグインを使用して、カメラ、位置情報、ファイルシステムなどのデバイス機能にアクセスできます。
  • 開発の簡素化: FamiliarなVue/Nuxtパターンを使用して、ネイティブ開発を学ぶことなくアプリケーションを開発できます。

前提条件

: まず、以下の条件を確認してください。

  • Node.js 18+ がインストールされている
  • 既存の Nuxt 4 application
  • Xcode (iOS開発用、macOSのみ)
  • Android Studio (Android開発用)

モバイル向けNuxtアプリの設定

最初のステップは、Nuxtアプリを静的生成用に設定することです。Capacitorは、静的HTML/JS/CSSファイルをネイティブアプリにバンドルする必要があります。

__CAPGO_KEEP_0__が静的HTML/JS/CSSファイルを生成するように確認してください。 package.json 重要:

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "mobile": "bun run generate && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

Important: サーバーサイド機能（API ルート、サーバーミドルウェアなど）を使用している場合は、クライアントサイドの代替または外部APIを使用する必要があります。

__CAPGO_KEEP_0__

bun run generate

あなたは静的ファイルのフォルダを確認するはずです。 .output/public これが Capacitor がネイティブアプリにパッケージングするものです。

Capacitor 8 をプロジェクトに追加する

ネイティブモバイルコンテナにNuxtアプリをパッケージングするには、以下の手順に従ってください。

  1. Capacitor コアと CLI をインストールする
bun add @capacitor/core
bun add -D @capacitor/cli
  1. インストールする必要がある一般的な Capacitor プラグインをインストールする
bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

これらのプラグインは、以下の機能を提供します:

  • @capacitor/app: アプリライフサイクルイベント (前景/背景、ディープリンク) を処理する
  • @capacitor/keyboard: モバイルでキーボードの動作を制御する
  • @capacitor/splash-screen：ネイティブのスプラッシュ画面を管理する
  • @capacitor/ステータスバー：デバイスのステータスバーをスタイリングする
  • @capacitor/プリファレンス：キーバリューストレージ（localStorageと同様のネイティブ）
  1. プロジェクトの詳細をCapacitorに初期化する:
bunx cap init my-app com.example.myapp --web-dir .output/public

置き換え my-app アプリ名と com.example.myapp アプリID（逆ドメイン記法）

  1. 適切な構成でファイルを作成または更新する: capacitor.config.ts ネイティブプラットフォームをインストールする:
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: '.output/public',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    StatusBar: {
      style: 'dark',
    },
  },
};

export default config;
  1. Capacitorプラットフォームをインストール
bun add @capacitor/ios @capacitor/android
  1. Nativeプラットフォームのフォルダを追加してください:
bunx cap add ios
bunx cap add android

Capacitorは ios と android プロジェクトのルートディレクトリにnativeプロジェクトを含むフォルダを作成します。

Androidプロジェクトをビルドするには Android Studioが必要です。iOSの場合は Mac.

  1. に
bun run mobile

Xcode

が必要です。プロジェクトをビルドしてsyncしてください:

このコマンドは、Nuxtの静的ビルドを生成し、nativeプラットフォームとファイルをsyncします。Nativeアプリをビルドして配信するには、以下の手順に従ってください。

iOSアプリを開発するには Xcode Androidアプリを開発するには Android Studio アプリをアプリストアに配信する場合、iOSではApple Developer Programに登録し、AndroidではGoogle Play Consoleに登録する必要があります。

  1. ネイティブプロジェクトを開く:

iOSの場合:

bun run mobile:ios

Androidの場合:

bun run mobile:android

または直接Capacitor CLI:

bunx cap open ios
bunx cap open android
  1. アプリをビルドして実行する:

android-studio-run

  • Android Studioでプロジェクトが準備できたら、実行ボタンをクリックして、接続されたデバイスまたはエミュレータにアプリをデプロイします。

Xcodeを実行

  • Xcodeで、実機にアプリをデプロイするために署名アカウントを設定してください。署名アカウントを設定することがまだない場合は、Xcodeはプロセスを指示します (Apple Developer Programに登録している必要があります)。署名アカウントを設定した後、実機に接続したデバイスでアプリを実行するために「Play」ボタンをクリックしてください。

成功しました!

nuxtjs-mobile-app

Nuxtモバイルアプリ

Capacitor ライブ リロード

__CAPGO_KEEP_0__ Live Reload

  1. 開発中は、モバイルデバイスで即時反映できるようにLive Reloadを利用できます。Live Reloadを有効にするには、以下の手順に従ってください。

  • ローカルIPアドレスを探す

    ipconfig getifaddr en0

  • macOSの場合、ターミナルで以下のコマンドを実行してください。

    ipconfig

    Windowsの場合、以下のコマンドを実行してください。

  1. アップデート capacitor.config.ts 開発サーバーにアクセスするには:
import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... your plugin config
  },
};

export default config;

置き換え YOUR_IP_ADDRESS ローカルIPアドレスに置き換えます (例:) 192.168.1.100).

  1. ネイティブプロジェクトに変更を適用する:
bunx cap copy

The copy Nuxtの開発サーバーを起動し、Xcode/Android Studioで再構築する:

  1. Nuxtアプリに変更を加えた場合、モバイルアプリは自動的に再読み込みされ、変更を反映します。
bun run dev

注意:

Note: code プラグインの使用

Capacitor プラグインは、Nuxtアプリからネイティブデバイスの機能にアクセスできるようにします。ネイティブデバイスの機能を使用する方法を紹介します。

Capacitor プラグインを共有する 例として:

  1. Share プラグインをインストールする:
bun add @capacitor/share
  1. Share プラグインを使用するページを作成または更新します。 Nuxt 4 では、ページは app/pages/:
<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">Welcome to Nuxt + Capacitor!</h1>
    <button
      @click="shareContent"
      class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold"
    >
      Share now!
    </button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function shareContent() {
  await Share.share({
    title: 'Check this out!',
    text: 'Built with Nuxt and Capacitor',
    url: 'https://capacitorjs.com',
    dialogTitle: 'Share with friends',
  });
}
</script>
  1. 変更をネイティブ プロジェクトと同期する:
bun run mobile

または、再構築せずに同期する:

bunx cap sync
  1. アプリをデバイス上で実行する。

Share プラグインの「Share now!」ボタンをクリックすると、ネイティブの共有ダイアログが表示されます。

次に、iOS と Android でネイティブのフィーリングを実現するために、Capgo ナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSの一般的なレイアウト問題を解決できます。

ネイティブのフィーリングのUIとCapgoネイティブのナビゲーションとトランジション

私は Ionic クロスプラットフォームアプリケーションを構築するには、Nuxtと統合することはハック的で、すでに持っている場合にあまり価値がありません。 Tailwind CSS.

For a native mobile feel in a Nuxt + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

  • @capgo/capacitor-ナイティブ・ナビゲーション —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバーのスタイル。Nuxtルータがルートの状態を保持し、プラグインがネイティブのブラウザを管理します。
  • @capgo/capacitor-transitions —Ionicスタイルのページ遷移とiOSのエッジスワイプバックをWebView層で実行することなく、Ionic UIを採用する必要がなくても。

両方をインストールします。

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

ネイティブのナビゲーションをCSSのインセットモードで設定して、Webコンテンツがネイティブのバーを尊重するようにします。

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

液体ガラスのタブバーをレンダリングします。(iOSはシステムが所有するレンダリングを使用し、AndroidはブラーされたWebViewのバックグラウンドを使用します)。

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  router.push(`/${id}`);
});

ネイティブのページ遷移をアプリケーションシェルに追加します。

<script setup>
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/vue';

initTransitions({ platform: 'auto' });

const router = useRouter();
const outletRef = ref(null);

onMounted(() => {
  if (outletRef.value) {
    setupRouterOutlet(outletRef.value, { platform: 'auto', swipeGesture: 'auto' });
  }
});

const openSettings = () => {
  setDirection('forward');
  router.push('/settings');
};
</script>

<template>
  <cap-router-outlet ref="outletRef">
    <router-view />
  </cap-router-outlet>
</template>

ルーティングされたページをwrapします。 cap-router-outlet, cap-page、そして cap-content、そして呼び出す setDirection('forward') または setDirection('back') Capacitorライブアップデートの代替

Capacitorライブアップデートの代替 @capgo/capacitor-ネイティブナビゲーション and Using @capgo/capacitor-transitions.

Capacitorライブアップデートの代替

Capacitorライブアップデートの代替 @capgo/Tailwind-capacitor Capacitorライブアップデートの代替の使用方法: @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationを参照してください。 tailwind-capacitor npm)で利用できます。提供 safe-areas Capacitor向けのTailwindプラグインなど

bun add -D tailwind-capacitor

In app/assets/css/main.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

For Nuxt 4とTailwind CSS 4の場合、CSSファイルに記述されている nuxt.config.ts.

Capacitor のユーティリティなどを利用する pt-safe, pb-safe, px-safe instead of手動で env(safe-area-inset-*) by hand。プロジェクトは活発に開発されています — Nuxtの設定で不足しているものがある場合、 GitHub に Pull Request を作成する.

iOSレイアウトの問題を修正する (Viewport、Safe Area、Horizontal Overflow)

If content looks cropped, shifted, or horizontally scrollable on iOS、 overflow-x: hidden or tweaking the viewport tag alone usually does not fix it。Work through these checks in order。

ビューポートメタタグが正しく適用されていることを確認してください。

In nuxt.config.ts, 画面を表示する際のビューポートを設定する app.head:

export default defineNuxtConfig({
  app: {
    head: {
      meta: [
        {
          name: 'viewport',
          content: 'width=device-width, initial-scale=1, viewport-fit=cover',
        },
      ],
    },
  },
});

iOSセーフエリアを1つのルートラッパーからのみハンドルする

単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用する — 複数のネストされたコンポーネントに適用するのではなく:

html,
body,
#__nuxt {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

すべてのページコンテンツを .app-shell. セーフエリアのパディングがヘッダー、モーダル、レイアウトラッパーに複数回適用されることがあるため、UIが切り取られたり大きすぎるように見えることがあります。

With @capgo/Tailwind-capacitor__CAPGO_KEEP_0__ iOS pt-safe pb-safe px-safe __CAPGO_KEEP_1__

Capacitor contentInset to never first

In capacitor.config.ts, contentInsetMode: 'css'Native Navigationの安全エリアを管理する

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'out',
  ios: {
    contentInset: 'never',
  },
};

CSSの自動インセットとCapacitorの自動インセットを組み合わせると、余白が倍増することがよくあります。 env(safe-area-inset-*) 実際にオーバーフローしている要素を探します

通常、幅が固定ピクセル単位の要素や幅が大きい要素が原因です

Safari Web Inspectorで実行してください 100vw, Tailwind w-screen, 固定ピクセル幅、または大きい min-width.

実際にオーバーフローしている要素を探します

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Tailwindを使用すると、 w-screen 可能な限り w-full 水平方向のオーバーフロー問題は、 100vw / w-screen安全エリアの重複したパディング、または固定幅のコンテナから来ています — ではなく、

ビューポートメタタグ自体から

You’ve successfully converted your existing Nuxt web application into native iOS and Android apps using Capacitor 8. Your Vue codebase now runs natively on mobile devices with access to device APIs.

既存のNuxt Webアプリケーションを__CAPGO_KEEP_0__ 8を使用して、

  • 成功的にiOSとAndroidのネイティブアプリに変換しました。
  • Capacitor 8 に必要なプラグインを追加しました。
  • モバイルデバイスで実行され、デバイスAPIにアクセスできます。
  • あなたが達成したこと:
  • Nuxtを静的生成用に設定しました。
  • Native-feeling UI を追加しました。Capgo Native Navigation と Transitions

次のステップ:

  • 設定 Capgo オーバー・ザ・エア更新のためにアプリストアの再提出を回避
  • カメラ、位置情報、またはプッシュ通知などのネイティブ プラグインを追加
  • アプリのアイコンとスプラッシュスクリーンをプロダクション用に設定
  • アプリをApp StoreとGoogle Playの提出用に準備

新しいプロジェクトから始める場合は、 ネイティブモバイルアプリを作成するためのガイド付きウォークスルー リソース

Resources

Learn how Capgo can help you build better apps faster, 当前パックストを宺了してしています してしています

Keep going from Convert Your Nuxt App to iOS &amp; Android with Capacitor 8

Capacitor Convert Your Nuxt App to iOS &amp; Android with Capacitor 8 native プラグインの作業を計画するには、 Capgo プラグイン ディレクトリ Capgo プラグイン ディレクトリ内での製品ワークフロー Capacitor プラグイン によって Capgo Capgo による Capacitor プラグイン __CAPGO_KEEP_0__ プラグイン __CAPGO_KEEP_1__ による __CAPGO_KEEP_0__ プラグインの実装詳細 プラグインの追加または更新 プラグインの追加または更新の実装詳細、 Capgo 本機ビルド for the product workflow in Capgo Native Builds.

Live updates for Capacitor apps

When a web-layer bug is live, ship the fix through Capgo instead of waiting days for app store approval. Users get the update in the background while native changes stay in the normal review path.

最新のブログ記事

Capgoは、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を提供します。

Capacitorアプリで2方向のコミュニケーション
開発 モバイル +1
2025年4月26日

Capacitorアプリで2方向のコミュニケーション

5つのOTA更新ミスを避ける
開発 セキュリティ +1
2025年4月13日

5つのOTA更新ミスを避ける

モバイルアプリのライブ更新のための5つのセキュリティベストプラクティス
開発 モバイル +1
2025年1月14日

モバイルアプリのライブ更新のための5つのセキュリティベストプラクティス

__CAPGO_KEEP_0__のすべてのブログ記事