Building Mobile Apps with Vue and Capacitor

このチュートリアルでは、VueのWebアプリケーションをCapacitorを使用してネイティブモバイルアプリケーションに変換するプロセスを指導します。Capgo Native NavigationとTransitionsを追加すると、ネイティブモバイルのフィールが得られ、安全なエリアを使用することもできます。tailwind-capacitor

Capacitorについて

Capacitorは、Webプロジェクトに簡単に統合できるゲームチェンジングツールです。アプリケーションをネイティブモバイルアプリケーションに変換し、カメラなどのネイティブデバイス機能にアクセスできるJavaScriptブリッジを提供します。

Vueアプリの準備

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

vue create my-app
cd my-app
npm install

ネイティブモバイルのためのVueアプリを準備するには、プロジェクトをエクスポートする必要があります。package.jsonファイルにスクリプトを追加して、Vueプロジェクトをビルドしてコピーします: コマンドを実行した後、次の新しいファイルが表示されるはずです。 __CAPGO_KEEP_1__

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

__CAPGO_KEEP_2__ build __CAPGO_KEEP_0__ 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. Add the platforms, and Capacitor will create folders for each platform at the root of your project:

# 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 __CAPGO_KEEP_0__.config.json webDir webDir

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

Now, you can build your Vue project and sync it with Capacitor:

npm run build
npx cap sync

ビルドコマンドの結果に

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

Use the Capacitor CLI to open both native projects:

npx cap open ios
npx cap open android

iOSアプリを開発するには、Xcodeがインストールされている必要があります。Androidアプリを開発するには、Android Studioがインストールされている必要があります。また、iOSの場合、Apple Developer Programに登録し、Androidの場合、Google Play Consoleに登録する必要があります。アプリストアでアプリを配布するには。

Capacitor __CAPGO_KEEP_1__を使用して、両方のネイティブプロジェクトを開きます:

Enable live reload on your mobile device by having the Capacitor app load the content from a specific URL on your network.

__CAPGO_KEEP_0__ Live Reload機能を有効にするには、__CAPGO_KEEP_0__アプリがネットワーク上の特定のURLからコンテンツを読み込むようにする必要があります。 capacitor.config.ts ファイルに正しいIPとポートを指定してください:

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アプリを更新したときに自動的にリロードされ、変更が表示されます。

Using Capacitor Plugins

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

npm i @capacitor/share

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

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

次に、iOSとAndroidでnativeなUIを実現するために、__CAPGO_KEEP_0__ナビゲーションとトランジションを使用し、水平オーバーフローまたは安全エリアがカットされたiOSのレイアウト問題を解決できます。 sync nativeなUIを実現するために使用するナビゲーションとトランジション

npx cap sync

Next, you can make the app feel more native on iOS and Android with Capgo navigation and transitions, and fix common iOS layout issues that cause horizontal overflow or cropped safe areas.

Native-feeling UI with Capgo Native Navigation and Transitions

Capacitor Ionic クロスプラットフォームアプリケーションを構築するには、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:

• @capgo/capacitor-native-navigation —ネイティブのナビゲーションバー、iOSのLiquid Glassタブバー、Androidのブラーされたタブバーのスタイル。Vueルーターのルート状態を維持し、プラグインはネイティブのブラウザを所有します。
• @capgo/capacitor-transitions —Ionicスタイルのページ遷移とiOSのエッジスワイプバックをWebViewレイヤーで実現します。IonicのUIを採用する必要はありません。

両方をインストールします。

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

ネイティブのナビゲーションをCSSのインセットモードで構成して、Webコンテンツがネイティブのバーを尊重するようにします。

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

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

液体ガラスのタブバーをレンダリングします (iOSはシステム所有のレンダリングを使用し、AndroidはブラーされたWebViewのバックグラウンドを使用します)。

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') 移動する前に、重複するWebヘッダーまたはフッターを生成しないでください。ネイティブのナビゲーションがそれらの表面を所有している場合。

詳細なガイドを参照してください: Using @capgo/capacitor-native-navigation Capacitorライブアップデートの代替方法についての Using @capgo/capacitor-transitions.

Tailwind CSSでデバイスの安全なエリアを使用するには

@__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__ @capgo/tailwind-capacitor (公開された) tailwind-capacitor on npm。 safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Capgo向けの 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-*) の代わりに open a PR on GitHub.

Capgoで開発が行われています。必要な機能が不足している場合は、

iOSレイアウトの問題を解決する方法 overflow-x: hidden iOSでコンテンツが切り取られ、ずれ、または水平方向にスクロールされる場合、

ビューポート メタタグの適用が正しく行われていることを確認する

ビューポート メタタグを追加する index.html 中 <head>:

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

iOS セーフエリアを 1 つのルートラッパーからのみ処理する

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で、__CAPGO_KEEP_0__ iOS pt-safe pb-safe px-safe __CAPGO_KEEP_1__

Set Capacitor iOS contentInset に never 最初

In capacitor.config.ts, contentInsetMode: 'css'原生のインセットを有効にし、CSS (またはNative Navigationの)

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

Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__の自動コンテンツインセットとCSSのパディングを組み合わせると、通常はダブルスペースが発生する

実際にオーバーフローしている要素を探す

通常の原因は、 100vw、 w-screen、固定ピクセル幅、または大きい min-width.

run:

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

__CAPGO_KEEP_0__で、Tailwindを置き換えます。 w-screen __CAPGO_KEEP_0__で w-full 可能な限り、水平方向のオーバーフロー問題は、 100vw / w-screen安全エリアのパディングが重複したり、固定幅のコンテナが使用されているりすることによるものです。 — それ自体のビューポートメタタグによるものではありません。

結論

Capacitorは既存のWebプロジェクトに基づいてネイティブアプリケーションを構築するのに適したオプションです。Capgoを追加すると、さらに簡単にアプリにリアルタイムの更新を追加できます。ユーザーは常に最新の機能やバグ修正にアクセスできます。

Capgoがアプリをより速く作成できるようにする方法を学びましょう。 無料アカウントに登録する 今すぐ。

Building Mobile Apps with VueとCapacitorから続けてください。

Building Mobile Apps with Vueと__CAPGO_KEEP_0__を使用している場合 Building Mobile Apps with Vue and Capacitor ネイティブのメディアとインターフェイスの動作を計画するには、接続する必要があります。 Using @capgo/capacitor-live-activities for the native capability in Using @capgo/capacitor-live-activities, @capgo/capacitor-live-activities for the implementation detail in @capgo/capacitor-live-activities, Using @capgo/capacitor-video-player for the native capability in Using @capgo/capacitor-video-player, @capgo/capacitor-video-player for the implementation detail in @capgo/capacitor-video-player, and Using @capgo/capacitor-native-navigation for the native capability in Using @capgo/capacitor-native-navigation.