メインコンテンツにジャンプ
Capgo ロゴ
Tutorial

Capacitor 8を使ってNuxtモバイルアプリを作成する

Nuxt 4プロジェクトを作成し、Capacitor 8を使用してiOSとAndroidのネイティブモバイルアプリに変換するステップバイステップガイドです。モバイルファーストのVue開発を始めるのにぴったりです。

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

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

コンテンツマーケター
Capacitor 8を使ってNuxtモバイルアプリを作成する

導入

Nuxtからモバイルアプリを作成するには、最初からモバイルに最適化されたNuxt 4プロジェクトを作成し、__CAPGO_KEEP_0__ 8を使用してネイティブiOSとAndroidアプリにパッケージ化するガイドです。 Capacitor 8.

このチュートリアルを終了すると、シミュレータ上で動作するワークイングモバイルアプリが作成され、開発を続け、最終的にApp StoreとGoogle Playに公開することができます。

所要時間： ~30分

作成するもの：

  • Nuxt 4プロジェクトの最新ディレクトリ構造で新しく作成する
  • モバイル用の静的生成設定
  • Capacitor 8に必要なプラグインを含む
  • ネイティブiOSおよびAndroidアプリ
  • ライブリロード開発環境

既存のNuxtアプリがある場合は Nuxtアプリをモバイルに変換する の代わりに.

前提条件

インストールされていることを確認してください:

  • Node.js 18+ (確認する node --version)
  • Bun パッケージマネージャー (curl -fsSL https://bun.sh/install | bash)
  • Xcode (macOSのみ、iOS開発用)
  • Android Studio (Android開発用)

ステップ 1: Nuxt 4 プロジェクトの作成

新しい Nuxt 4 プロジェクトを作成してください:

bunx nuxi@latest init my-mobile-app
cd my-mobile-app
bun install

Nuxt 4 ディレクトリ構造

Nuxt 4 は、新しいディレクトリ構造を使用し、app code がディレクトリ内にあります。 app/ ディレクトリ:

my-mobile-app/
  app/
    assets/
    components/
    composables/
    layouts/
    middleware/
    pages/
    plugins/
    utils/
    app.vue
  public/
  server/
  nuxt.config.ts
  package.json

この構造では、app とサーバー code の間の分離が改善されます。

ステップ 2: Nuxt を静的生成用に設定する

Capacitor は、静的 HTML/JS/CSS ファイルが必要です。Nuxt を静的生成用に設定するには、 nuxt.config.ts:

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },

  // Enable static generation
  ssr: true,
  nitro: {
    preset: 'static',
  },
});

ステップ 3: モバイル スクリプトを追加する

モバイル開発用のスクリプトを更新してください: 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"
  }
}

静的ファイルが含まれるディレクトリを確認することができます。

bun run generate

ステップ 4: __CAPGO_KEEP_0__ 8 をインストールする .output/public targetLanguage

Step 4: Install Capacitor 8

Capacitorの基本パッケージをインストールしてください：

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

モバイルアプリが必要とする基本的なプラグインをインストールしてください：

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 —

Step 5: Initialize Capacitor

Step 5: Capacitorを初期化する

bunx cap init "My Mobile App" com.example.mymobileapp --web-dir .output/public

__CAPGO_KEEP_0__をプロジェクトの詳細情報で初期化する:

  • "My Mobile App" 置き換え:
  • com.example.mymobileapp アプリの表示名

アプリID (逆ドメイン表記) capacitor.config.tsこれにより

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile 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;

. プラグインの設定を更新する:

Step 6: ネイティブプラットフォームを追加する

bun add @capacitor/ios @capacitor/android

プラットフォームパッケージをインストールする:

bunx cap add ios
bunx cap add android

ネイティブプロジェクトを生成する: ios そして、ネイティブプロジェクトを含むディレクトリ。 android Step 7: ビルドと実行

プロジェクトをビルドし、ネイティブプラットフォームと同期する:

iOS シミュレータで開く:

bun run mobile

またはAndroid エミュレータで開く:

bun run mobile:ios

Xcode (iOS) で:

bun run mobile:android

デバイスドロップダウンからシミュレータを選択

  1. プレイボタンをクリックまたは
  2. Android Studio で: Cmd + R

Gradle の同期が完了するのを待つ

  1. デバイスドロップダウンからエミュレータを選択
  2. Step 7: Build and Run
  3. Click the Run button or press Shift + F10

Step 8: Set Up Live Reload

開発を高速化するには、ライブリロードを有効にして、デバイス上で即座に変更が反映されるようにしてください。

  1. ローカルIPアドレスを探してください:
# macOS
ipconfig getifaddr en0

# Windows
ipconfig
  1. 開発用のCapacitor設定を作成してください。更新 capacitor.config.ts:
import type { CapacitorConfig } from '@capacitor/cli';

const devConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... same plugin config
  },
};

const prodConfig: CapacitorConfig = {
  appId: 'com.example.mymobileapp',
  appName: 'My Mobile App',
  webDir: '.output/public',
  plugins: {
    // ... same plugin config
  },
};

const config = process.env.NODE_ENV === 'development' ? devConfig : prodConfig;

export default config;
  1. 開発サーバーを起動し、設定をネイティブにコピーしてください:
bun run dev &
NODE_ENV=development bunx cap copy
  1. Xcode/Android Studioで再構築

Nuxt codeの編集内容は、デバイス上で即座に反映されます。

Step 9: Create Your First Mobile Screen

モバイル用のホーム画面を作成してください。更新 app/app.vue:

<template>
  <NuxtPage />
</template>

作成 app/pages/index.vue:

<template>
  <main
    class="min-h-screen bg-linear-to-b from-green-500 to-green-700 flex flex-col items-center justify-center p-6 text-white"
  >
    <h1 class="text-4xl font-bold mb-4">My Mobile App</h1>
    <p class="text-xl mb-8 text-center opacity-90">
      Built with Nuxt 4 + Capacitor 8
    </p>

    <div v-if="appInfo" class="bg-white/20 rounded-lg p-4 backdrop-blur-sm mb-8">
      <p class="text-sm">
        {{ appInfo.name }} v{{ appInfo.version }}
      </p>
    </div>

    <div class="space-y-4 w-full max-w-sm">
      <button
        class="w-full py-4 px-6 bg-white text-green-600 rounded-xl font-semibold text-lg shadow-lg active:scale-95 transition-transform"
        @click="handleGetStarted"
      >
        Get Started
      </button>
      <button
        class="w-full py-4 px-6 bg-white/20 text-white rounded-xl font-semibold text-lg backdrop-blur-sm active:scale-95 transition-transform"
        @click="handleShare"
      >
        Share App
      </button>
    </div>
  </main>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { App } from '@capacitor/app';

const appInfo = ref<{ name: string; version: string } | null>(null);

let backButtonListener: { remove: () => void } | null = null;

onMounted(async () => {
  // Get app info
  try {
    appInfo.value = await App.getInfo();
  } catch (e) {
    // Web fallback
    appInfo.value = { name: 'My Mobile App', version: '1.0.0' };
  }

  // Handle Android back button
  backButtonListener = await App.addListener('backButton', ({ canGoBack }) => {
    if (!canGoBack) {
      App.exitApp();
    } else {
      window.history.back();
    }
  });
});

onUnmounted(() => {
  backButtonListener?.remove();
});

function handleGetStarted() {
  // Navigate to onboarding or main app
  console.log('Get started clicked');
}

async function handleShare() {
  // We'll implement this with the Share plugin later
  console.log('Share clicked');
}
</script>

Step 10: Add Tailwind CSS

For the styling to work, add Tailwind CSS to your project:

bun add tailwindcss @tailwindcss/vite

更新 nuxt.config.ts:

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },

  ssr: true,
  nitro: {
    preset: 'static',
  },

  css: ['~/assets/css/main.css'],

  vite: {
    plugins: [tailwindcss()],
  },
});

作成 app/assets/css/main.css:

@import 'tailwindcss';

:root {
  --sat: env(safe-area-inset-top);
  --sar: env(safe-area-inset-right);
  --sab: env(safe-area-inset-bottom);
  --sal: env(safe-area-inset-left);
}

body {
  padding-top: var(--sat);
  padding-right: var(--sar);
  padding-bottom: var(--sab);
  padding-left: var(--sal);
}

/* Prevent text selection on mobile */
* {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Allow text selection in inputs */
input,
textarea {
  -webkit-user-select: auto;
  user-select: auto;
}

ステップ11：Share プラグインを追加

Share ボタン機能を実装する

bun add @capacitor/share

更新 app/pages/index.vue Share プラグインを使用するには

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue';
import { App } from '@capacitor/app';
import { Share } from '@capacitor/share';

// ... existing code ...

async function handleShare() {
  try {
    await Share.share({
      title: 'Check out this app!',
      text: 'Built with Nuxt 4 and Capacitor 8',
      url: 'https://capacitorjs.com',
      dialogTitle: 'Share with friends',
    });
  } catch (e) {
    console.log('Share cancelled or failed:', e);
  }
}
</script>

Sync and rebuild:

bun run mobile

プロジェクト構造

プロジェクトは次のようになります:

my-mobile-app/
├── android/                  # Android native project
├── ios/                      # iOS native project
├── .output/
│   └── public/              # Static build output
├── app/
│   ├── assets/
│   │   └── css/
│   │       └── main.css
│   ├── pages/
│   │   └── index.vue
│   └── app.vue
├── capacitor.config.ts       # Capacitor configuration
├── nuxt.config.ts            # Nuxt configuration
├── package.json
└── ...

次のステップ

Nuxt モバイル アプリが正常に動作しているので、次のことを実行してください:

基本設定

  • App アイコン： デフォルトのアイコンを ios/App/App/Assets.xcassets と android/app/src/main/res
  • スプラッシュ画面： ネイティブプロジェクトでカスタマイズするか @capacitor/splash-screen config
  • URLスキームを設定してアプリを 追加の機能

カメラ：

  • 位置情報： bun add @capacitor/camera
  • __CAPGO_KEEP_0__ bun add @capacitor/geolocation
  • プッシュ通知: bun add @capacitor/push-notifications または @capgo/capacitor-firebase-messaging iOSとAndroidのFirebase Cloud Messaging用
  • ファイルシステム: bun add @capacitor/filesystem

ネイティブUIとトランジション

Capgo プラグインを使用することで、Konsta UIの代わりにネイティブモバイルのフィールを実現できます:

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

タイルウィンドのセーフエリアを追加することで、安全なエリアを確保できます @capgo/tailwind-capacitor:

bun add -D tailwind-capacitor

See @capgo/capacitor-native-navigation, @capgo/capacitor-transitionsと tailwind-capacitor のリポジトリ

Nuxt用の設定のために

iOSレイアウトの問題を修正する (ビューポート、セーフエリア、水平方向のオーバーフロー) overflow-x: hidden iOSでコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見えている場合、ビューポートタグを追加したり変更したりするだけでは通常、問題を解決することはできません。

順序に従って、次のチェックを実行してください。

ビューポートメタタグが正しく適用されていることを確認する 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 つのルートラッパーからのみ処理する

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 がカットされたり大きすぎるように見えることがよくあります。

Capgo の @capgo/tailwind-capacitorで、同じパディングをユーティリティとして表現できます。 pt-safe pb-safe px-safe 1 つのシェルに iOS

Set Capacitor iOS contentInset 最初に never __CAPGO_KEEP_0__

In capacitor.config.ts, prefer native inset disabled and let CSS (or Native Navigation’s contentInsetMode: 'css'native insetを無効にして、CSS（またはNative Navigationの）が安全エリアを制御することを優先します。

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

Capacitorの自動コンテンツインセットとCSSのパディングを組み合わせることは、一般的なダブルスペースの原因です。 env(safe-area-inset-*) 実際にオーバーフローしている要素を探します

通常の原因は、

Tailwind 100vw固定ピクセル幅、または大きい w-screenSafari Web Inspectorで実行します: min-width.

Tailwindの場合、

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

に置き換えます. w-screen ]} w-full 可能であれば。多くの水平オーバーフロー問題は、安全エリアの重複パディングや固定幅のコンテナから来ています — 画面幅のメタタグ自体ではありません。 100vw / w-screenオーバー・ザ・エア更新

設定

__CAPGO_KEEP_0__ Capgo トラブルシューティング

bunx @capgo/cli init

ビルドが「モジュールが見つかりません」というエラーで失敗します

実行 そしてもう一度試してください。 bun install iOS: 「署名のアイデンティティが見つかりません」

Xcodeを開き、Signing &amp; Capabilitiesに移動し、開発チームを選択してください。']} targetLanguage

Android: “SDK location not found” Create android/local.properties with sdk.dir=/path/to/android/sdk

Changes not appearing on device Make sure you ran bun run mobile after making changes. For live reload, verify the IP address is correct and the dev server is running.

.output/public is empty or missing Make sure you configured nitro: { preset: 'static' } in nuxt.config.ts and run bun run generate.

Resources

Capgoでアプリを配信する準備はできましたか？ Capgo を使用して、更新をより速く配信する方法を学びましょう — __CAPGO_KEEP_0__の無料アカウントに登録する 今日。

Keep going from Build a Nuxt Mobile App from Scratch with Capacitor 8

Capgoを使用してNuxtモバイルアプリをゼロから構築する 8 Build a Nuxt Mobile App from Scratch with Capacitor 8 Capgoを使用してCI/CD自動化を計画する場合、接続する Capgo CI/CD Capgoの製品ワークフロー Capgo Native Builds Capgoのネイティブビルドワークフロー Capgo Integrations Capgoの統合ワークフロー CI/CD統合 CI/CD統合の実装詳細 GitHub Actions Integration GitHub Actions統合の実装詳細

Capacitor アプリ用のリアルタイム更新

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 を使用すると、プロフェッショナルなモバイルアプリを作成するために必要な最良の洞察を得ることができます。

2-Way Capacitorアプリケーション間の双方向通信
開発 モバイル +1
2025年4月26日

2-Way Capacitorアプリケーション間の双方向通信

5つのOTA更新の誤りを避けるための一般的な方法
開発 セキュリティ +1
2025年4月13日

5つのOTA更新の誤りを避けるための一般的な方法

5 Mobile App Live Update セキュリティのベスト プラクティス
開発 モバイル +1
2025年1月14日

5 Mobile App Live Update セキュリティのベスト プラクティス

ブログからすべてを参照