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

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

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

記事のクレジット

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

執筆者

バレリア

レビュアー

ジョーダン

編集者

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

導入

Nuxtでモバイルアプリをゼロから作りたい場合は、このガイドをご覧ください。このガイドでは、Nuxt 4プロジェクトをモバイル向けに設定し、最初からNative iOSとAndroidアプリとしてパッケージ化する方法を説明します。 Capacitor 8.

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

所要時間 ~30分

作成するもの

  • 新しいNuxt 4プロジェクト
  • モバイル向けの静的生成設定
  • Capacitor 8 with essential plugins
  • 基本的なプラグイン
  • Native 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

This structure provides better separation between app and 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: モバイルスクリプトの追加

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

静的ファイルが含まれるディレクトリを確認してください。 .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: Nativeプラットフォームを追加する

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

bun add @capacitor/ios @capacitor/android

ネイティブプロジェクトを生成する:

bunx cap add ios
bunx cap add android

これにより ios そして android ネイティブプロジェクトを含むディレクトリが作成される。

Step 7: ビルドと実行

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

bun run mobile

iOSシミュレータで開く:

bun run mobile:ios

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

bun run mobile:android

Xcode (iOS)で:

  1. デバイスドロップダウンからシミュレータを選択する
  2. クリックしてPlayボタンを押すか Cmd + R

Android Studioで

  1. GradleのSyncが完了するのを待つ
  2. デバイスのドロップダウンからエミュレータを選択する
  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の編集は、デバイスで即座に反映されるようになる

Step 9: Mobile Screenを初めて作成する

Let’s create a mobile-friendly home screen. app/app.vue:

<template>
  <NuxtPage />
</template>

Update 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を追加する

bun add tailwindcss @tailwindcss/vite

For the styling to work, add Tailwind CSS to your project: 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()],
  },
});

Update 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: Share Pluginを追加する

bun add @capacitor/share

Let’s implement the share button functionality: app/pages/index.vue Update

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

Share Pluginを使用するには：

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
└── ...

次のステップ

コンテキスト: Capgo Builder / ネイティブ クラウド ビルド製品ページ。役割: 短い UI ラベルまたはナビゲーション アイテム。メッセージ キー `native_build_builder_credit_next` (ネイティブ ビルド ビルダー クレジット 次)。

あなたは機能する Nuxt モバイル アプリを持っています。ここで何をするかを説明します。

  • 基本設定 アプリ アイコン: ios/App/App/Assets.xcassets デフォルトのアイコンを置き換える android/app/src/main/res
  • と コンテキスト: Capgo マーケティング ウェブサイト。役割: 短い UI ラベルまたはナビゲーション アイテム。ページ trust.astro で見られる。メッセージ キー `and` (そして)。 @capacitor/splash-screen スプラッシュ スクリーン:
  • ネイティブ プロジェクトでカスタマイズするか、または使用する `config` を選択します。 URLスキームを設定する

機能を追加する

  • カメラ: bun add @capacitor/camera
  • 位置情報: bun add @capacitor/geolocation
  • プッシュ通知: bun add @capacitor/push-notifications または @capgo/capacitor-firebase-messaging Capacitorライブアップデートの代替
  • Capacitorライブアップデートの代替 bun add @capacitor/filesystem

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

Use Capgo plugins instead of Konsta UI for a native mobile feel:

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

Capacitorを使用する場合、Tailwindの安全エリアを追加するには @capgo/tailwind-capacitor:

bun add -D tailwind-capacitor

See Using @capgo/capacitor-native-navigation, Using @capgo/capacitor-transitions,そして tailwind-capacitor リポジトリ

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

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つのルートラッパーからのみ取り扱います。

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

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/tailwind-capacitor、 pt-safe pb-safe px-safe On 1つのシェル上。

Capacitor iOSを設定 contentInset Live Update never 最初

Live Update capacitor.config.ts, Nativeのインセットを有効にし、CSS (またはNative Navigationの) contentInsetMode: 'css'CSSのパディングと__CAPGO_KEEP_0__の自動コンテンツインセットを組み合わせることは、ダブルスペースの原因となる一般的な問題です。

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

トラブルシューティング

ビルドが失敗し、「モジュールが見つかりません」と表示される 実行 bun install そしてもう一度試してください。

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

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

デバイスに表示されない変更 変更を実行した後、確かに bun run mobile 変更が反映されるように、IPアドレスが正しいかどうか、開発サーバーが実行中かどうかを確認してください。ライブリロードの場合。

.output/publicが空または存在しない場合 変更を実行した後、確かに nitro: { preset: 'static' } に nuxt.config.ts と実行 bun run generate.

リソース

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

Build a Nuxt Mobile App from Scratch with Capacitor 8

あなたは Build a Nuxt Mobile App from Scratch with Capacitor 8 CI/CDの自動化を計画するために Capgo CI/CD for the product workflow in Capgo CI/CD, Capgo Native Builds for the product workflow in Capgo Native Builds, Capgo Integrations for the product workflow in Capgo Integrations, Capgo Integrations CI/CD Integration GitHub アクション統合 GitHub アクション統合の実装詳細について。

Live updates for Capacitor apps

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

マーティンによる人間サポート

はじめましょう

最新のニュース

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

2方向の通信機能を備えたCapacitorアプリ
開発 モバイル +1
2025年4月26日

Capacitorアプリの2方向通信

OTA更新の5つの一般的なミス
開発 セキュリティ +1
ページ/エリア: Enterprise製品/価格ページ。役割: UIラベル。見られる場所: page enterprise.astro。メッセージキー `enterprise_hero_security_label` (Enterprise Hero Security Label)。

2025年4月13日

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

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

すべてのブログ記事を表示