Building Mobile Apps with Vue and Capacitor

Vue 웹 애플리케이션을 네이티브 모바일 앱으로 변환하는 과정을 안내하는 이 튜토리얼에서는 Capacitor을 사용하여 네이티브 모바일 앱을 만들 수 있습니다. 또한 Capgo 네이티브 네비게이션 및 전환을 추가하여 네이티브 모바일 느낌을 제공하고 tailwind-capacitor를 사용하여 안전한 영역을 사용할 수 있습니다.

Capacitor에 대해 알아보세요

Capacitor은 웹 프로젝트에 쉽게 통합할 수 있는 게임 체이닝 도구입니다. 이 도구는 네이티브 모바일 앱으로 변환할 수 있는 Xcode 및 Android Studio 프로젝트를 생성하고 JavaScript 브릿지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.

Vue 앱을 준비하세요

첫 번째로 Vue 앱을 새로 만들기 위해 다음 명령어를 실행하세요.

vue create my-app
cd my-app
npm install

Vue 앱을 네이티브 모바일 배포를 위해 준비하려면 프로젝트를 내보내야 합니다. 프로젝트에 스크립트를 추가하여 package.json __CAPGO_KEEP_0__ 프로젝트를 빌드하고 복사하는 파일:

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

__CAPGO_KEEP_0__ 명령어를 실행한 후에, 프로젝트의 루트 디렉토리에 새로운 폴더가 생성되어야 합니다. 이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용될 것입니다. build __CAPGO_KEEP_0__를 Vue 앱에 추가하는 방법 dist folder in your project’s root directory. This folder will be used by Capacitor later.

Capacitor __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정하세요. 이름과 번들 ID에 대한 기본값을 수락하세요.

__CAPGO_KEEP_0__ 코어 패키지를 설치하고 iOS 및 Android 플랫폼에 관련된 패키지를 설치하세요.

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 플랫폼에 대한 새로운 폴더를 볼 수 있어야 합니다.

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

__CAPGO_KEEP_1__ __CAPGO_KEEP_0__ 및 안드로이드 Vue 프로젝트의 폴더들.

Update the capacitor.config.json 파일을 __CAPGO_KEEP_0__의 빌드 명령어의 결과로 지정하세요: 이제, __CAPGO_KEEP_0__와 Vue 프로젝트를 동기화할 수 있습니다. Build and Deploy Native Apps

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

Use the __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ to open both native projects:

iOS 앱을 개발하려면 Xcode가 설치되어야 하며, 안드로이드 앱을 개발하려면 Android Studio가 설치되어야 합니다. 또한 iOS는 Apple Developer Program에, 안드로이드는 Google Play Console에 가입하여 앱 스토어에 앱을 배포하려면 등록해야 합니다.

Use the Capacitor CLI to open both native projects:

npx cap open ios
npx cap open android

Android Studio 또는 Xcode를 사용하여 장치에 앱을 배포하세요.

Capacitor Live Reload

Capacitor 앱이 네트워크 내 특정 URL에서 콘텐츠를 로드하여 모바일 장치에서 리로드를 활성화하세요.

네트워크 내 IP 주소를 찾으시고 __CAPGO_KEEP_0__ 파일에 올바른 IP 주소와 포트를 업데이트 하세요. capacitor.config.ts 이 변경 사항을 적용하려면 native 프로젝트에 복사하세요:

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;

Vue 앱을 업데이트하면 자동으로 앱이 리로드되고 변경 사항을 표시합니다.

npx cap copy

__CAPGO_KEEP_0__ 플러그인 사용

Capacitor 플러그인을 설치하세요, 예를 들어 공유 플러그인, 그리고 Vue 앱에서 사용하세요:

Install a Capacitor plugin, such as the Share plugin, and use it in your Vue app:

npm i @capacitor/share

새로운 플러그인을 설치한 후에 실행하세요: share() Deploy your app to a connected device using Android Studio or Xcode.

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

Using __CAPGO_KEEP_0__ Plugins sync __CAPGO_KEEP_0__을 재배포하여 장치에 앱을 다시 배포하세요:

npx cap sync

다음으로, iOS 및 Android에서 Capgo 네비게이션 및 전환을 사용하여 앱이 더 원시적인 느낌을 줄 수 있고, 수평 스크롤이나 안전 영역이 잘려 나가는 iOS 레이아웃 문제를 해결할 수 있습니다.

Capgo 네이티브 네비게이션 및 전환으로 원시적인 UI를 만듭니다.

__CAPGO_KEEP_0__에서 여러 해 동안 Ionic 을 사용하여 크로스 플랫폼 애플리케이션을 만들었습니다. 그러나 Vue와 통합하는 것은 Ionic과 Vue를 함께 사용하는 것보다 더 많은 노력을 필요로하고, 이미 Tailwind CSS를 사용하고 있다면 그것을 사용하는 것이 더 가치가 있습니다. Vue + __CAPGO_KEEP_0__ 앱에서 원시적인 모바일 느낌을 얻으려면 __CAPGO_KEEP_1__ 플러그인을 사용하세요. 웹 전용 UI 키트인 Konsta UI와 같은 것 대신에:.

@Capacitor/Capgo-native-navigation

• @capgo/capacitor-native-navigation @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-transitions
• @capgo/capacitor-transitions __CAPGO_KEEP_1__

설치 BOTH:

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

Liquid Glass 탭 바를 렌더링하십시오 (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 (__CAPGO_KEEP_0__에서 발표됨). __CAPGO_KEEP_0__에서 제공하는 tailwind-capacitor npm-친화적인 Tailwind 플러그인: safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

Tailwind CSS의 src/assets/main.css:

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

대신 사용하세요. Tailwind CSS에서 pt-safe, pb-safe대신 사용하세요. Tailwind CSS에서 px-safe 대신 사용하세요. Tailwind CSS에서 env(safe-area-inset-*) Tailwind CSS에서 __CAPGO_KEEP_0__를 활성화하면 GitHub에 PR을 열기.

iOS 레이아웃 문제를 해결하는 방법 (뷰포트, 안전 영역, 가로 스크롤)

iOS에서 콘텐츠가 잘려나거나-shifted되거나 가로 스크롤이 가능하다면, 더 많은 overflow-x: hidden 또는 뷰포트 태그를 조정하는 것만으로는 문제를 해결할 수 없다. 이러한 체크를 순서대로 진행하라.

뷰포트 메타 태그가 올바르게 적용되었는지 확인하라

뷰포트 메타 태그를 추가하라 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/tailwind-capacitor, __CAPGO_KEEP_0__을 사용하여 동일한 패딩을 표현할 수 있습니다. pt-safe pb-safe px-safe 단일 셸에서 "on that single shell."를 입력합니다.

Capacitor iOS를 "Set Capacitor iOS"로 설정합니다. contentInset __CAPGO_KEEP_0__ never __CAPGO_KEEP_0__

native inset이 비활성화된 경우 CSS (또는 Native Navigation의)가 안전 영역을 관리하도록 하세요. capacitor.config.ts__CAPGO_KEEP_0__의 자동 콘텐츠 인셋과 CSS 패딩을 혼합하는 것은 두 배의 간격이 발생하는 일반적인 원인입니다. contentInsetMode: 'css'__CAPGO_KEEP_0__

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

Capacitor env(safe-area-inset-*) __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

일반적인 원인은 사용하는 요소가 100vw, Tailwind w-screen, 고정 픽셀 너비, 또는 min-width.

Safari Web Inspector에서 실행:

[...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, 중복된 safe-area 패딩, 또는 고정 너비 컨테이너 — viewport meta 태그 자체가 아닌 것에서 발생합니다.

결론

Capacitor은 기존 웹 프로젝트를 기반으로 하는 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. Capgo을 추가함으로써, 앱에 실시간 업데이트를 추가하는 것이 thậm chí 더 쉬워졌습니다. 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 보장합니다.

Capgo이 앱을 더 빠르게 빌드하는 데 어떻게 도움이 될 수 있는지 알아보세요. __CAPGO_KEEP_0__을 사용하여 무료 계정으로 가입하세요. 오늘도.

Vue와 Capacitor으로부터 시작하여 빌드하는 모바일 앱

Capgo를 사용 중이라면 Vue와 Capacitor으로부터 시작하여 빌드하는 모바일 앱 native 미디어 및 인터페이스 동작을 계획하려면 @capgo/capacitor-live-activities와 연결하세요. @capgo/capacitor-live-activities에서 native 기능을 사용하는 경우 @capgo/capacitor-live-activities @capgo/capacitor-live-activities에서 구현 세부 정보를 사용하는 경우 @capgo/capacitor-video-player @capgo/capacitor-video-player에서 native 기능을 사용하는 경우 @capgo/capacitor-video-player capgo/capacitor-video-player에 대한 구현 세부 정보입니다. Using @capgo/capacitor-native-navigation을 사용합니다. capgo/capacitor-native-navigation을 사용하는 native 기능에 대해