Vue 및 Capacitor으로 빌드하는 모바일 앱

In this tutorial, we’ll guide you through the process of converting a Vue web application into a native mobile app using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

Capacitor에 대해 알아보기

Capacitor는 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이닝 도구입니다. Capacitor를 사용하여 네이티브 모바일 앱으로 변환하고, 네이티브 장치 기능을 사용할 수 있습니다.

Vue 앱 준비

첫 번째 단계는 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 __CAPGO_KEEP_2__ dist 프로젝트의 루트 디렉토리 내에 있는 폴더입니다. 이 폴더는 Capacitor에 의해 나중에 사용됩니다.

Vue 앱에 Capacitor 추가하기

웹 앱을 네이티브 모바일 컨테이너로 변환하려면 다음 단계를 따르세요:

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.
iOS 및 Android 플랫폼에 대한 핵심 패키지 및 관련 패키지를 설치합니다.
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 폴더 context":"Page/area: Capgo marketing website. Role: Short UI label or navigation item. Seen in: page trust.astro. Message key `and` (And)." android

폴더가 Vue 프로젝트에 보입니다. capacitor.config.json __CAPGO_KEEP_0__.config.json 웹 디렉토리 웹 디렉토리

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

현재, __CAPGO_KEEP_0__을 사용하여 Vue 프로젝트를 빌드하고同步할 수 있습니다:

네이티브 앱 빌드 및 배포

Use the Capacitor CLI to open both native projects:

npx cap open ios
npx cap open android

__CAPGO_KEEP_0__ 및 __CAPGO_KEEP_1__을 사용하여 iOS 및 Android 앱을 모두 열 수 있습니다:

Capacitor 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 앱을 업데이트할 때 앱이 자동으로 다시 로드되고 변경 사항을 표시할 것입니다.

Capacitor 플러그인 사용

Capacitor 플러그인을 설치하고 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에서 앱이 더 원생스러운 느낌을 줄 수 있도록 __CAPGO_KEEP_0__ 네비게이션 및 전환을 사용하고, 수평 스크롤이나 안전 영역이 잘려나가는 문제를 해결하세요. sync 원생스러운 UI를 위해 __CAPGO_KEEP_0__ 네이티브 네비게이션 및 전환을 사용하세요

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.

__CAPGO_KEEP_0__ 아이오닉 cross-platform 애플리케이션을 만들기 위해 사용하지만, Vue와 통합하는 것은 해키하고 거의 가치가 없을 때 이미 가지고 있는 테일윈드 CSS.

Vue + Capacitor 앱에서 네이티브 모바일 느낌을 얻으려면, 웹 전용 UI 키트인 Konsta UI 대신 Capgo 플러그인을 사용하세요:

@capgo/capacitor-native-navigation — 네이티브 네비게이션 바, iOS에서 Liquid Glass 탭 바, Android에서 흐린 탭 바 스타일. Vue 라우터는 라우트 상태를 유지하고 플러그인은 네이티브 창을 소유합니다.
@capgo/capacitor-transitions — 아이오닉 스타일의 페이지 전환 및 iOS 에지 스와이프 백(WebView layer)으로 iOS 에지 스와이프 백을 사용하지 않고 아이오닉 UI를 채택하지 않습니다.

두 개 모두 설치하세요:

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

네이티브 네비게이션을 CSS inset 모드와 구성하여 웹 콘텐츠가 네이티브 바를 존중하세요:

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') 페이지를 탐색하기 전에 중복되는 웹 헤더 또는 푸터를 만들지 마십시오.

자세한 지침을 참조하십시오: Using @capgo/capacitor-native-navigation 및 Using @capgo/capacitor-transitions.

Tailwind에서 안전한 영역

Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor (게시일) tailwind-capacitor on npm. safe-areas Capacitor에 친화적인 Tailwind 플러그인과 같은 Capacitor의 유틸리티를 제공합니다.

bun add -D tailwind-capacitor

In src/assets/main.css:

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

Vue 앱에서 사용할 수 있는 유틸리티를 사용하세요. pt-safe, pb-safe, px-safe 대신 __CAPGO_KEEP_0__에서 제공하는 유틸리티를 사용하세요. env(safe-area-inset-*) 수동으로 __CAPGO_KEEP_0__을 사용하여 스프링크를 피하세요. 프로젝트는 활발히 개발 중입니다. Vue 설정에 필요한 기능이 누락된 경우, GitHub에서 PR을 열어보세요..

iOS 레이아웃 문제 (뷰포트, 안전 영역, 수평 스크롤)를 해결하세요.

__CAPGO_KEEP_0__에서 iOS 레이아웃 문제를 해결하는 방법 overflow-x: hidden iOS에서 콘텐츠가 잘려나거나-shifted되거나 수평 스크롤이 가능하다면, __CAPGO_KEEP_0__의 viewport 태그만 수정하거나 __CAPGO_KEEP_0__의 viewport 태그를 수정하여 문제를 해결할 수 없습니다. 이 순서대로 체크하세요.

뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하세요.

뷰포트 메타 태그를 추가하세요. index.html 내부 <head>:

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

iOS 안전 영역을 한 번에 루트 wrapper에서 처리하세요.

단일 앱 셸을 생성하고 안전 영역 패딩을 거기에 적용하세요 — 여러 중첩된 컴포넌트에 적용하지 마세요:

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헤더, 모달, 레이아웃 wrapper에 중복된 안전 영역 패딩이 있는 경우 UI가 잘린 것처럼 보이거나 너무 크게 보일 수 있습니다.

그리고 @__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__와 함께, 같은 패딩을 표현할 수 있습니다. @capgo/tailwind-capacitor__CAPGO_KEEP_0__ iOS pt-safe pb-safe px-safe on that single shell.

Set Capacitor iOS `contentInset` 까지 `never` 첫 번째

In capacitor.config.ts, 원하는 위치에 Native Navigation을 사용하여 Safe Area를 설정하세요. contentInsetMode: 'css'__CAPGO_KEEP_0__의 자동 콘텐츠 인셋과 CSS 패딩을 혼합하는 것은 일반적인 더블 스페이싱의 원인입니다.

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-*) 일반적으로 요소가

, Tailwind

, 고정 픽셀 너비 또는 100vw를 사용하는 경우입니다. w-screenSafari Web Inspector에서 실행하세요: min-width.

In Safari Web Inspector, 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,
  }));

Tailwind를 사용하면 w-screen 대신 w-full 가능한 경우에만 사용하세요. 많은 가로 스크롤 문제는 100vw / w-screen중복된 안전 영역 패딩 또는 고정 너비 컨테이너에서 오는 것이 아니라

viewport meta 태그 자체에서 오는 것이 아닙니다.

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.

Capgo은 기존 웹 프로젝트를 기반으로 하는 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. __CAPGO_KEEP_1__을 추가하면 앱에 실시간 업데이트를 추가하는 것이 thậm chí 더 쉬워지며, 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다. __CAPGO_KEEP_0__을 사용하여 더 나은 앱을 더 빠르게 빌드하는 방법을 알아보세요. __CAPGO_KEEP_0__ 무료 계정으로 가입하세요.

Keep going from Building Mobile Apps with Vue and Capacitor

Building Mobile Apps with Vue and __CAPGO_KEEP_0__에서 계속 진행하세요. Building Mobile Apps with Vue and Capacitor을 사용하고 있다면 native 미디어 및 인터페이스 동작을 계획하기 위해 연결하세요. Using @capgo/capacitor-live-activities native 기능을 위해 Using @capgo/capacitor-live-activities @capgo/capacitor-live-activities @capgo/capacitor-live-activities의 구현 세부 사항 Using @capgo/capacitor-video-player native 기능을 위해 Using @capgo/capacitor-video-player @capgo/capacitor-video-player @capgo/capacitor-video-player의 구현 세부 사항, 그리고 Using @capgo/capacitor-native-navigation native 기능을 위해 Using @capgo/capacitor-native-navigation.

Vue와 Capacitor를 사용하여 모바일 앱을 빌드하세요.