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

Introduction

既存のNuxt Webアプリがある場合? Capacitor 8 — 最新バージョンでパフォーマンスが向上し、新機能が追加されたバージョンです。

Capacitorは、既存のVueコードベースを保持しながら、デバイスAPI（カメラ、ファイルシステム、プッシュ通知など）にアクセスできるネイティブコンテナにWebアプリをラップします。FlutterやReact Nativeとは異なり、既存のNuxt codeは何も書き直す必要がありません。

学ぶこと

既存のNuxtアプリを静的生成用に設定する
Capacitor 8にエッセンシャルなネイティブプラグインを追加する
iOSとAndroidのシミュレータでビルドおよびテストする
ライブリロードを有効にすることで開発が速くなる
iOSのレイアウトの一般的な問題（ビューポート、セーフエリア、水平オーバーフロー）を修正する
ネイティブフィーリングのUIをCapgo Native NavigationとTransitionsで追加する

新しいプロジェクトから始めるには? Building a Nuxt Mobile App from Scratch.

Capacitorを使用する利点

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

__CAPGO_KEEP_0__

開始する前に、以下を確認してください:

Node.js 18+ インストール済み
既存の Nuxt 4 アプリケーション
Xcode (iOS開発の場合、macOSのみ)
Android Studio (Android開発の場合)

Nuxtアプリの設定

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

__CAPGO_KEEP_0__を確認してください package.json __CAPGO_KEEP_0__に生成スクリプトが含まれていることを確認してください

{
  "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"
  }
}

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

静的生成をテストするには、以下のコマンドを実行してください

bun run generate

__CAPGO_KEEP_0__を使用して、静的ファイルを生成する必要があります。 .output/public Capacitorフォルダにファイルが見つかります。このフォルダ内のファイルは、Capacitorがネイティブアプリにパッケージングするファイルです。

Adding Capacitor 8 to Your Project

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

Install Capacitor core and CLI:

bun add @capacitor/core
bun add -D @capacitor/cli

Install common Capacitor plugins you’ll likely need:

bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

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

@capacitor/app: アプリライフサイクルイベントをハンドル (前景/背景、ディープリンク)
@capacitor/keyboard: モバイル上のキーボードの動作を制御
@capacitor/splash-screen: ネイティブのスプラッシュスクリーンを管理
@capacitor/status-bar: デバイスのステータスバーをスタイル
@capacitor/preferences: キー値ストレージ (localStorageと同様のネイティブ)

Initialize Capacitor with your project details:

bunx cap init my-app com.example.myapp --web-dir .output/public

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

Create or update the 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;

native platformsをインストールします:

bun add @capacitor/ios @capacitor/android

native platformフォルダを追加します:

bunx cap add ios
bunx cap add android

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

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

プロジェクトをビルドして同期する:

bun run mobile

__CAPGO_KEEP_0__を実行すると、静的Nuxtビルドとネイティブプラットフォームとのファイル同期が実行されます。

ネイティブアプリのビルドと配布

ネイティブモバイルアプリをビルドおよび配布するには、次の手順に従ってください。

iOSアプリを開発するには、 Xcode がインストールされている必要があります。また、Androidアプリを開発するには、 Android Studio がインストールされている必要があります。さらに、App Storeでアプリを配布する場合、iOSではApple Developer Programに登録し、AndroidではGoogle Play Consoleに登録する必要があります。

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

iOSの場合:

bun run mobile:ios

For Android:

bun run mobile:android

Capacitor CLI

bunx cap open ios
bunx cap open android

Build and run the app:

android-studio-run

Android Studioでプロジェクトが準備できたら、実機またはエミュレータにアプリをデプロイするために「Run」ボタンをクリックしてください。

xcode-run

Xcodeで署名アカウントを設定して、実機にアプリをデプロイする準備ができたら、Apple Developer Programに登録されている場合はXcodeが導きます。署名アカウントを設定した後、「Play」ボタンをクリックして実機でアプリを実行してください。

成功しました！Nuxt webアプリをモバイルデバイスにデプロイしました。

しかし、開発中にはもっと速くする方法もあります…

Capacitor Live Reload

開発中は、実機で即座に変更を確認できるLive Reload機能を利用できます。Live Reload機能を有効にするには、以下の手順に従ってください:

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

__CAPGO_KEEP_0__
```
ipconfig getifaddr en0
```
Windowsの場合、以下のコマンドをターミナルで実行します:
```
ipconfig
```
出力でIPv4アドレスを探します。

__CAPGO_KEEP_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;

__CAPGO_KEEP_0__ YOUR_IP_ADDRESS にローカルIPアドレス (例えば 192.168.1.100).

nativeプロジェクトに変更を適用します:

bunx cap copy

コマンドは、webフォルダと構成変更をnativeプロジェクトにコピーし、プロジェクト全体を更新せずにします。 copy Nuxtの開発サーバーを起動し、Xcode/Android Studioで再構築します:

__CAPGO_KEEP_2__

bun run dev

今、Nuxtアプリに変更を加えた場合、モバイルアプリは自動的にリロードされ、変更を反映します。

注意: 新しいプラグインをインストールしたり、ネイティブファイルに変更を加えた場合、ライブリロードはWeb code の変更にのみ適用されるため、ネイティブプロジェクトを再構築する必要があります。

Capacitor プラグインの使用

Capacitor プラグインは、Nuxtアプリからネイティブデバイスの機能にアクセスできるようにします。Share プラグインを使用する例として、以下をご覧ください。 Share プラグインをインストールする: Share プラグインを使用するページを作成または更新します。Nuxt 4 では、ページは

Sync の変更をネイティブプロジェクトと同期する:

bun add @capacitor/share

または、再構築せずにSyncする: 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>

ネイティブプロジェクトを再構築し、デバイス上でアプリを実行します。

bun run mobile

新しいプラグインをインストールしたり、ネイティブファイルに変更を加えた場合、ライブリロードはWeb __CAPGO_KEEP_0__ の変更にのみ適用されるため、ネイティブプロジェクトを再構築する必要があります。

bunx cap sync

__CAPGO_KEEP_0__ プラグインの使用

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

次に、iOSとAndroidでアプリがよりネイティブのようになります。Capgoナビゲーションとトランジションを使用して、iOSの一般的なレイアウト問題を解決し、水平方向のオーバーフローまたは安全な領域のクロップを修正します。

数年間、 Ionic を使用してクロスプラットフォームアプリケーションを構築してきましたが、Nuxtと統合することはハック的で、Nuxtがすでに持っている場合にあまりにも価値がないため、よくありません。 Nuxt + __CAPGO_KEEP_0__アプリケーションでネイティブモバイルのフィーリングを実現するには、WebのみのUIキットであるKonsta UIではなく、__CAPGO_KEEP_1__プラグインを使用します。.

@Capacitor/Capgo-native-navigation

@capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
@capgo/capacitor-transitions @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigationと@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitionsは、Nuxt + __CAPGO_KEEP_0__アプリケーションでネイティブモバイルのフィーリングを実現するために使用できます。

両方をインストールする:

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

CSS inset モードでネイティブのバーを尊重するようにウェブコンテンツをネイティブのナビゲーションと組み合わせる:

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>

ルーティングされたページを cap-router-outlet, cap-page, cap-content, setDirection('forward') , setDirection('back') と呼び出して、ネイティブのナビゲーションが所有する表面に重複したウェブヘッダーまたはフッターを表示しないようにします。

詳細なガイドを参照してください: Capacitor@capgo/capacitor-native-navigation と @capgo/capacitor-transitions.

セーフエリアに使用するTailwind

デバイスセーフエリアのTailwind CSSの場合、使用 @capgo/tailwind-capacitor (公開された 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";

Nuxt 4とTailwind CSS 4の場合、CSSファイルにこのimportを保持してください。 nuxt.config.ts.

ユーティリティとして使用する pt-safe, pb-safe、 px-safe の代わりに散らばって使用するのではなく env(safe-area-inset-*) __CAPGO_KEEP_0__ GitHub.

iOSレイアウトの問題を修正する (ビューポート、セーフエリア、水平オーバーフロー)

iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見えている場合、ビューポートタグを追加または調整するだけでは問題が解決しないことがよくあります。 overflow-x: hidden ビューポートメタタグが正しく適用されていることを確認する

ビューポートを

セーフエリアをiOSの根元のラッパーからのみハンドルする nuxt.config.tsアプリのシェルを1つ作成し、セーフエリアのパディングをそこに適用する — 複数のネストされたコンポーネントに適用するのではなく: app.head:

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

すべてのページコンテンツを

重複したセーフエリアのパディングがヘッダー、モーダル、レイアウトラッパーに存在すると、UIが切り取られたり大きすぎるように見えることがよくあります。

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セーフエリアのパディングをヘッダー、モーダル、レイアウトラッパーに重複して適用しないようにしましょう。

With @capgo/tailwind-capacitorで、同じパディングを表現するためにユーティリティのようなものを使用できます。 pt-safe pb-safe px-safe __CAPGO_KEEP_0__ iOS

Set Capacitor iOS `contentInset` 最初 `never` In

、ネイティブのインセットを無効にして、CSS（またはNative Navigationの）がセーフエリアを管理することを優先します。 capacitor.config.ts__CAPGO_KEEP_0__の自動コンテンツインセットとCSSのパディングを組み合わせることは、ダブルスペースの原因となる一般的な問題です。 contentInsetMode: 'css') own the safe area:

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) padding is a common cause of double spacing.

Find the real overflowing element

The usual culprit is an element using 100vw, Tailwind w-screen, a fixed pixel width, or a large min-width.

In Safari Web Inspector, run:

[...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,
  }));

With Tailwind, replace w-screen with w-full when possible. Many horizontal overflow issues come from 100vw / w-screen, duplicated safe-area padding, or a fixed-width container — not from the viewport meta tag itself.

Conclusion

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.

What you accomplished:

Configured Nuxt for static generation
Capacitor 8 の追加（基本プラグイン）
iOS と Android のシミュレータにビルドおよびデプロイ
開発用にライブリロードを有効
iOS の一般的なレイアウト問題（ビューポート、セーフエリア、オーバーフロー）を修正
Capgo Native Navigation と Transitions を使用してネイティブフィーリングの UI を追加

次のステップは

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

新しいプロジェクトから始めるのですか？ Nuxt Mobileアプリの作成から __CAPGO_KEEP_0__ 8ドキュメントを参照してください。

リソース

Nuxtドキュメント
Capacitorドキュメント
@capgo/capacitor-native-navigation —Liquid Glassタブバーとネイティブブラウザ
@capgo/capacitor-transitions —ネイティブフィーリングのページ遷移
@capgo/tailwind-capacitor — Capacitor の安全エリアユーティリティ
Capgo - Capacitor アプリ向けリアルタイム更新

Capgo を使って、より良いアプリをより速く作る方法を学びましょう無料アカウントに登録する今日

Capacitor 8 を使って、Nuxt アプリを iOS および Android に変換

__CAPGO_KEEP_0__ を使用している場合 Nuxt アプリを iOS および Android に変換するには、Capacitor 8 を使用する __CAPGO_KEEP_0__ 8 を使用して、ネイティブプラグインの作業を計画するには、__CAPGO_KEEP_0__ Plugin Directory に接続する Capgo Plugin Directory の製品ワークフロー Capgo Plugin Directory の __CAPGO_KEEP_1__ によって提供されるプラグイン Capgo によって提供される Capacitor プラグイン実装詳細については Capacitor プラグインの Capgo を参照してください。プラグインの追加または更新実装詳細についてはプラグインの追加または更新を参照してください。 Ionic Enterprise プラグインの代替 Ionic Enterprise プラグインの代替の製品ワークフローについては、 Capgo ネイティブビルド製品ワークフローについては Capgo ネイティブビルドを参照してください。

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

Introduction

Capacitorを使用する利点

__CAPGO_KEEP_0__

Nuxtアプリの設定

Adding Capacitor 8 to Your Project

ネイティブアプリのビルドと配布

Capacitor Live Reload

Capacitor プラグインの使用

ネイティブフィーリングのUIはCapgoネイティブナビゲーションとトランジションで構成されます。

セーフエリアに使用するTailwind

iOSレイアウトの問題を修正する (ビューポート、セーフエリア、水平オーバーフロー)

ビューポートを

すべてのページコンテンツを

Set Capacitor iOS `contentInset` 最初 `never` In

Find the real overflowing element

Conclusion

リソース

Capacitor 8 を使って、Nuxt アプリを iOS および Android に変換

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

Introduction

Capacitorを使用する利点

__CAPGO_KEEP_0__

Nuxtアプリの設定

Adding Capacitor 8 to Your Project

ネイティブアプリのビルドと配布

Capacitor Live Reload

Capacitor プラグインの使用

ネイティブフィーリングのUIはCapgoネイティブナビゲーションとトランジションで構成されます。

セーフエリアに使用するTailwind

iOSレイアウトの問題を修正する (ビューポート、セーフエリア、水平オーバーフロー)

ビューポートを

すべてのページコンテンツを

Set Capacitor iOS contentInset 最初 never In

Find the real overflowing element

Conclusion

リソース

Capacitor 8 を使って、Nuxt アプリを iOS および Android に変換

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

Set Capacitor iOS `contentInset` 最初 `never` In