メインコンテンツにジャンプ
Capgoロゴ
チュートリアル

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

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

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

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

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

概要

Nuxtから始めてモバイルアプリを構築したいですか? このガイドでは、モバイル向けに最初から設定されたNuxt 4プロジェクトを作成し、次に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開発用

Step 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 と server code の間の分離を改善します。

Step 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',
  },
});

Step 3: モバイル スクリプトの追加

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

静的生成をテストする:

bun run generate

静的ファイルが含まれるディレクトリを確認することができます。 .output/public ステップ 4: __CAPGO_KEEP_0__ 8 をインストールする

Capacitor のコアパッケージをインストールする:

Install the Capacitor core packages:

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

これらのプラグインは何を実行するか:

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

__CAPGO_KEEP_0__/app

  • @capacitor/app __CAPGO_KEEP_0__/keyboard
  • @capacitor/keyboard __CAPGO_KEEP_0__/splash-screen
  • @capacitor/splash-screen — 本機スプラッシュ画面の制御
  • @capacitor/status-bar — デバイスのステータスバーのスタイルを設定
  • @capacitor/preferences — キー値ストレージ（localStorageと同じ機能が実装されている）

ステップ 5: Capacitor を初期化する

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

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

置き換え:

  • "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:

Install the platform packages:

bun add @capacitor/ios @capacitor/android

Generate the native projects:

bunx cap add ios
bunx cap add android

This creates ios native platformのパッケージをインストールします: android native projectを生成します:

native projectが生成され

native projectのディレクトリが作成されます。

bun run mobile

Step 7:

bun run mobile:ios

native platformと同期してプロジェクトをビルドします:

bun run mobile:android

iOS Simulatorで開く:

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

Android Studioで:

  1. Gradleの同期が完了するのを待ってください
  2. デバイスドロップダウンからエミュレータを選択してください
  3. 実行ボタンをクリックまたは Shift + F10

ステップ8:ライブリロードの設定

開発が速くなるように、ライブリロードを有効にしてください。変更は即座にデバイスに表示されます。

  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: 最初のモバイル画面を作成する

モバイル端末向けのホーム画面を作成しましょう。更新 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: Tailwind CSSを追加する

スタイリングが機能するように、プロジェクトにTailwind CSSを追加してください。

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

Step 11: シェア プラグインを追加する

シェアボタンの機能を実装しましょう。

bun add @capacitor/share

シェア プラグインを使用するには、以下の手順に従ってください。 app/pages/index.vue Sync and rebuild: 同期し、再構築

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

Update

bun run mobile

プロジェクト構造

__CAPGO_KEEP_0__

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モバイルアプリを持っています。ここで何をするか

基本設定

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

機能を追加

  • カメラ: bun add @capacitor/camera
  • 位置情報: 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

Tailwindのセーフエリアを追加するには @capgo/tailwind-capacitor:

bun add -D tailwind-capacitor

See Using @capgo/capacitor-native-navigation, Using @capgo/capacitor-transitions、および tailwind-capacitor リポジトリ

Nuxt用の設定のために

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

、でビューポートを設定してください

iOSのセーフエリアを1つのルートラッパーからのみ取り扱ってください nuxt.config.ts単一のアプリシェルを作成し、セーフエリアのパディングをそこに適用してください — 複数のネストされたコンポーネントに適用するのではなく 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);
}

、@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ .app-shellと同様のパディングを、ユーティリティとして表現できます

targetLanguage @capgo/tailwind-capacitortexts pt-safe pb-safe px-safe On 1 つのシェル上。

Capacitor iOS を "Capacitor" に設定します。 contentInset 最初に never In

, native の inset を無効にして、CSS (または Native Navigation の ) が安全なエリアを管理することをお勧めします。 capacitor.config.ts__CAPGO_KEEP_0__ の自動コンテンツの inset と CSS の padding を組み合わせると、一般的なダブルスペースの原因です。 contentInsetMode: 'css'実際にオーバーフローしている要素を探します。

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) , Tailwind

__CAPGO_KEEP_0__ を設定します。

__CAPGO_KEEP_0__ を設定します。 100vw__CAPGO_KEEP_0__ を設定します。 w-screen、ピクセル幅の固定、または大きい min-width.

Safari Web インスペクタで実行:

[...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安全なエリアの重複パディング、または固定幅のコンテナ — ではなく、ビューポートメタタグ自体から

オーバー・ザ・エア更新

設定 Capgo アプリストアの再提出なしで更新をプッシュする

bunx @capgo/cli init

トラブルシューティング

ビルドが「モジュールを検索できません」というエラーで失敗 Run bun install と再試行してください。

iOS: “署名のIDENTITYが見つかりません” Xcodeを開き、Signing &amp; Capabilitiesに移動し、開発チームを選択してください。

Android: “SDKの場所が見つかりません” 作成 android/local.properties と sdk.dir=/path/to/android/sdk

デバイスに表示されない変更 変更を実行した後、確かに実行したことを確認してください。ライブリロードの場合、IPアドレスが正しいかどうかと、開発サーバーが実行中かどうかを確認してください。 bun run mobile .output/publicが空または存在しない場合

変更を実行したことを確認してください。ライブリロードの場合、IPアドレスが正しいかどうかと、開発サーバーが実行中かどうかを確認してください。 __CAPGO_KEEP_0__ nitro: { preset: 'static' } in nuxt.config.ts と実行する bun run generate.

リソース

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

Capacitor 8から始めて、Nuxtモバイルアプリをゼロから作成する

あなたが使用している場合 Nuxtモバイルアプリをゼロから作成するCapacitor 8 CI/CD自動化の計画を行う場合、__CAPGO_KEEP_0__ CI/CDに接続する Capgo CI/CDの製品ワークフロー Capgo Native Buildsの製品ワークフロー Capgo Integrationsの製品ワークフロー for the product workflow in Capgo Native Builds, Capgo Integrations Capgo CI/CDの製品ワークフロー __CAPGO_KEEP_0__ Native Buildsの製品ワークフロー __CAPGO_KEEP_0__ Integrationsの製品ワークフロー GitHub アクション統合 GitHub アクション統合の実装詳細について。

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

Capgoのバグが実際に生じた場合、Capgoを使用して修正を配信するのではなく、数日間待ってアプリストアの承認を待つのではなく、ユーザーはバックグラウンドで更新を受け取り、ネイティブの変更は通常のレビュー経路で残る。

Get Started Now

Latest from our Blog

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

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

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

__CAPGO_KEEP_0__のOTA更新の5つの一般的なミスを回避する
開発 セキュリティ +1
2025年4月13日

OTA更新の5つのよくある間違いを避ける

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

モバイルアプリライブアップデートの5つのセキュリティベストプラクティス

ブログからすべてを参照