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

Building Mobile Apps with Vue and Capacitor

Vue、Capacitorを使用したモバイルアプリの作成方法を学びましょう。Capacitorを使用して、Capgoのネイティブナビゲーション、トランジション、iOSレイアウトのベストプラクティスをオプションで強化することもできます。

記事のクレジット

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

ライター

ヴァレリア

レビュアー

Jordan

エディター

Building Mobile Apps with Vue and Capacitor

このチュートリアルでは、ウェブアプリケーションをネイティブモバイルアプリケーションに変換するプロセスを指導するために、Vueのウェブアプリケーションを使用します。 Capacitor を使用してネイティブモバイルアプリケーションを構築することもできます。また、 Capgo Native Navigation and Transitions を使用してネイティブモバイルのフィールを実現し、 capacitor を使用して安全なエリアを実現することもできます。

About Capacitor

Capacitor は、ウェブプロジェクトに簡単に統合できるゲームチェンジャーです。ウェブアプリケーションをネイティブモバイルアプリケーションに変換することができます。また、ネイティブデバイスの機能にアクセスすることもできます。

モバイルアプリを構築する準備

最初に、次のコマンドを実行して新しいVueアプリケーションを作成します。

vue create my-app
cd my-app
npm install

モバイルデプロイ用にVueアプリケーションを準備するには、プロジェクトをエクスポートする必要があります。package.jsonファイルにスクリプトを追加して、Vueプロジェクトをビルドしてコピーするようにします。 実行した後 __CAPGO_KEEP_0__

{
  "scripts": {
    // ...
    "build": "vue-cli-service build"
  }
}

__CAPGO_KEEP_1__ build コマンドを実行すると、新しい dist プロジェクトのルートディレクトリに新しいフォルダが作成されます。このフォルダは後でCapacitorによって使用されます。

Adding Capacitor to Your Vue App

VueのWebアプリをネイティブモバイルコンテナに変換するには、以下の手順に従ってください。

  1. Install the Capacitor CLI as a development dependency and set it up within your project. Accept the default values for name and bundle ID during the setup.

  2. コアパッケージとiOSおよびAndroidプラットフォーム用のパッケージをインストールします。

  3. プラットフォームを追加し、Capacitorはプロジェクトのルートディレクトリに各プラットフォームごとにフォルダを作成します。

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your Vue project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

新しい iOS と android フォルダがVueプロジェクトに表示されます。

アップデート capacitor.config.json ファイルを webDir に変更してください。

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "dist"
}

現在、Vueプロジェクトを構築し、Capacitorと同期できます。

npm run build
npx cap sync

今、Vueプロジェクトをビルドし、__CAPGO_KEEP_0__と同期できます。

ネイティブアプリをビルドしてデプロイ

Capacitorのプロジェクトを両方とも開くには、Capacitor CLIを使用してください。

npx cap open ios
npx cap open android

両方のネイティブプロジェクトを開くには、__CAPGO_KEEP_0__ __CAPGO_KEEP_1__を使用してください。

Capacitor ライブリロード

Capacitor Live Reload

ローカルIPアドレスを確認し、正しいIPとポート番号でファイルを更新してください: capacitor.config.ts 変更を適用するには、以下の内容をローカルプロジェクトにコピーしてください:

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:8080',
    cleartext: true
  }
};

export default config;

Nativeプロジェクトに変更を適用した後、以下の内容を実行してください:

npx cap copy

Vueアプリを更新すると、自動的にアプリがリロードされ、変更が反映されます。

Capacitor プラグインを使用する

Capacitor プラグインをインストールし、Share プラグインを使用してVueアプリを実装することができます:

npm i @capacitor/share

インストールしたプラグインを使用するには、以下のパッケージをインポートし、関数を呼び出してください: share() 新しいプラグインをインストールした後、以下のコマンドを実行し、再度アプリをデバイスにデプロイしてください:

<template>
  <div>
    <h1>Welcome to Vue and Capacitor!</h1>
    <button @click="share">Share now!</button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function share() {
  await Share.share({
    title: 'Open Youtube',
    text: 'Check new video on youtube',
    url: 'https://www.youtube.com',
    dialogTitle: 'Share with friends'
  });
}
</script>

新しいプラグインをインストールした後は、 sync ネイティブなUIを実現する__CAPGO_KEEP_0__ナビゲーションとトランジション

npx cap sync

Capgoは、ネイティブなUIを実現するためのナビゲーションとトランジションです。

Capgoを使用すると、水平オーバーフローまたはカットオフされたセーフエリアを引き起こすiOSの一般的なレイアウト問題を修正できます。

私は数年間Capacitorを使用して Ionic クロスプラットフォームアプリケーションを構築するには、しかし、Vueと統合することはハック的で、既存のものがある場合にはほとんど価値がない Tailwind CSS.

For a native mobile feel in a Vue + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:

@Capacitor/vue-transitions

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

— Ionic-style page transitions and iOS edge swipe-back in the WebView layer, without adopting Ionic UI.

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

Install both:

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 のライブアップデートの代替品を追加する

Capacitor のライブアップデートの代替品を追加する Using @capgo/capacitor-native-navigation and @capgo/capacitor-トランジションを使用します。.

Capacitor のライブアップデートの代替品を追加する

Capacitor のライブアップデートの代替品を追加する @capgo/Tailwind-capacitor (公開された) tailwind-capacitor on npm)。これは safe-areas utilities とその他の Capacitor-対応の Tailwind プラグインを提供します:

bun add -D tailwind-capacitor

In src/assets/main.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

使用できるユーティリティとして pt-safe, pb-safe, px-safe 代わりに手動で env(safe-area-inset-*) を使用するのではなく、プロジェクトは積極的に開発されています。 — ご利用の Vue 設定で欠けているものが何かありましたら、 GitHub に Pull Request を作成する.

iOS でコンテンツが切り取られた、ずれた、または水平方向にスクロールできるように見えている場合、

__CAPGO_KEEP_0__ overflow-x: hidden または、ビューポートタグを調整するだけでは解決しません。順序に従ってこれらのチェックを実行してください。

ビューポートメタタグが正しく適用されていることを確認してください。

ビューポートメタタグを追加してください。 index.html 内部 <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

iOSのセーフエリアを1つのルートラッパーからのみ取り扱います。

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

html,
body,
#app {
  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 単一のシェルに

CapgoをCapacitorに設定 contentInset to never 最初

In capacitor.config.ts、原生インセットを無効にして、CSS（またはNative Navigationの） contentInsetMode: 'css'セーフエリアを管理する

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

Capacitorの自動コンテンツインセットとCSSを組み合わせる env(safe-area-inset-*) 実際にオーバーフローしている要素を探す

通常の原因は、

、Tailwind 100vw、固定ピクセル幅、または大きい w-screen, 固定ピクセル幅、または大きい min-width.

サファリ 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,
  }));

タイルウインドで置き換え: w-screen 可能な場合に: w-full 水平方向のオーバーフロー問題は、 100vw / w-screen安全なエリアの重複したパディング、または固定幅のコンテナ — ではなく、

Conclusion

Capacitor is a great option for building native applications based on an existing web project. With the addition of Capgo, it’s even easier to add live updates to your app, ensuring that your users always have access to the latest features and bug fixes.

Learn how Capgo can help you build better apps faster, __CAPGO_KEEP_0__がアプリをより速く作成できるようにしてみましょう 無料アカウントに登録する

Keep going from Building Mobile Apps with Vue and Capacitor

Building Mobile Apps with Vueと__CAPGO_KEEP_0__から続けてください VueとCapacitorでモバイルアプリを構築する ネイティブメディアとインターフェイスの動作を計画するには、接続する @capgo/capacitorライブアクティビティを使用 Using @capgo/capacitor-live-activities Using @capgo/capacitor-live-activities Using @capgo/capacitor-live-activities Using @capgo/capacitor-video-player Using @capgo/capacitor-video-player Using @capgo/capacitor-video-player Using @capgo/capacitor-video-player Using @capgo/capacitor-native-navigation Using @capgo/capacitor-native-navigation

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方向のコミュニケーションを実現するCapacitorアプリ
開発 モバイル +1
2025年4月26日

2方向の通信機能を備えたCapacitorアプリ

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

5つのOTA更新ミスの一般的な例を避ける

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

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

すべてのブログ記事を参照