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

Build a Nuxt Mobile App from Scratch with Capacitor 8

Step-by-step guide to creating a new Nuxt 4 project and turning it into native iOS and Android mobile apps using Capacitor 8. Perfect for starting fresh with mobile-first Vue development.

Martin Donadieu

Martin Donadieu

Content Marketer
Build a Nuxt Mobile App from Scratch with Capacitor 8

Introduction

Want to build a mobile app with Nuxt from the ground up? This guide walks you through creating a brand new Nuxt 4 project configured for mobile from day one, then packaging it as native iOS and Android apps using Capacitor 8.

By the end of this tutorial, you’ll have a working mobile app running on simulators that you can continue developing and eventually publish to the App Store and 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 — ローカルストレージ (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;

ステップ 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. Run ボタンをクリックまたは Shift + F10

ステップ 8: Live Reload を設定

開発のために、デバイス上で即時反映されるように 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 の編集はデバイス上で即時反映されます。

ステップ 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>

ステップ 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;
}

ステップ11: シェア プラグインを追加する

シェア ボタン機能を実装するには、以下の手順に従ってください:

bun add @capacitor/share

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

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

プロジェクト構造

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モバイルアプリが正常に動作するようになりました。ここでは、次のステップを実行してください:

Project Structure

__CAPGO_KEEP_0__

  • アプリアイコン: __CAPGO_KEEP_1__のデフォルトアイコンを置き換えます。 ios/App/App/Assets.xcassets and android/app/src/main/res
  • __CAPGO_KEEP_2__: __CAPGO_KEEP_3__でカスタマイズするか、 @capacitor/splash-screen __CAPGO_KEEP_4__
  • URLスキームを設定してアプリを構成します。 機能を追加する

カメラ:

  • 位置情報: bun add @capacitor/camera
  • targetLanguage bun add @capacitor/geolocation
  • Push Notifications: bun add @capacitor/push-notifications
  • File System: bun add @capacitor/filesystem

UI Enhancement

Consider adding Konsta UI for native-looking iOS/Android components:

bun add konsta

Then update your CSS to import the theme:

@import 'tailwindcss';
@import 'konsta/theme.css';

Over-the-Air Updates

Set up Capgo を使用して、再配布の必要のないアプリの更新をプッシュする:

bunx @capgo/cli init

トラブルシューティング

モジュールが見つかりませんというエラーが発生します。 Run bun install もう一度試してください。

iOS: サインイング アイデンティティが見つかりません Xcodeを開き、Signing &amp; Capabilitiesに移動し、開発チームを選択してください。

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

デバイス上で変更が表示されません 変更を実行した後、 bun run mobile ライブ リロードの場合、IP アドレスが正しいかどうかと、開発サーバーが実行中であることを確認してください。

.output/publicが空または存在しない場合 Capgoの設定が正しくされていることを確認してください nitro: { preset: 'static' } で nuxt.config.ts と実行して bun run generate.

リソース

アプリを出荷する準備ができましたか? Capgo が更新をより速く配信できるように助けます — 無料アカウントに登録する 今日。

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

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

今すぐ始めましょう

ブログの最新記事

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

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

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

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

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

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

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

ブログからすべてを参照