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를 사용하여 애플리케이션을 네이티브 모바일 앱으로 변환할 수 있습니다. 또한 네이티브 Xcode 및 Android Studio 프로젝트를 생성하고 네이티브 장치 기능에 대한 접근을 제공합니다.

Vue 앱 준비

첫 번째로, 다음 명령어를 실행하여 새로운 Vue 앱을 생성하세요:

vue create my-app
cd my-app
npm install

자연스러운 모바일 배포를 위해 Vue 앱을 준비하려면 프로젝트를 내보내야 합니다. package.json 파일에 스크립트를 추가하여 Vue 프로젝트를 빌드하고 복사하세요: 명령어를 실행한 후, 프로젝트의 루트 디렉토리에 새로운 폴더가 생성되어야 합니다. 이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용됩니다. Vue 웹 앱을 네이티브 모바일 컨테이너로 변환하는 방법

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

Vue 웹 앱을 네이티브 모바일 컨테이너로 변환하려면 다음 단계를 따르세요: build __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정하세요. 이름과 번들 ID에 대한 기본값을 수락하세요. dist folder in your project’s root directory. This folder will be used by Capacitor later.

플랫폼을 추가하고, Capacitor은 프로젝트의 루트 디렉토리에 각 플랫폼에 대한 폴더를 생성합니다:

Adding __CAPGO_KEEP_0__ to Your Vue App

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.
Install the __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ as a development dependency and set it up within your project. Accept the default values for name and bundle ID during the setup.
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

이제 새로운 폴더를 Vue 프로젝트에 보실 수 있습니다. iOS 및 android 폴더가 있습니다.

__CAPGO_KEEP_0__.config.json 파일을 업데이트 하세요. 빌드 명령어의 결과로 capacitor.config.json의 webDir를 설정하세요. 이제 Vue 프로젝트를 빌드하고 __CAPGO_KEEP_0__와 동기화할 수 있습니다. 빌드 및 __CAPGO_KEEP_0__로 배포하는 네이티브 앱 __CAPGO_KEEP_0__

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

Capacitor

npm run build
npx cap sync

__CAPGO_KEEP_0__

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

Capacitor CLI을 사용하여 iOS 및 Android의 네이티브 프로젝트를 모두 열 수 있습니다.

npx cap open ios
npx cap open android

Android Studio 또는 Xcode를 사용하여 연결된 장치에 앱을 배포합니다.

Capacitor Live Reload

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

네트워크 내의 자신의 IP 주소를 찾고 __CAPGO_KEEP_0__ 파일에 올바른 IP 주소와 포트를 업데이트 하세요. capacitor.config.ts __CAPGO_KEEP_0__ 파일에 변경 사항을 복사하여 네이티브 프로젝트에 적용하세요.

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__ 플러그인을 설치하고, 예를 들어 공유 플러그인을 설치하여 Vue 앱에서 사용하세요.

Capacitor 패키지를 임포트하고 Capacitor 함수를 호출하세요.

Capacitor

npm i @capacitor/share

__CAPGO_KEEP_1__ share() function in your app:

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

new plugin을 설치한 후에 다음 명령어를 실행하고 앱을 다시 장치에 배포하세요: sync iOS와 Android에서 더 원활한 네이티브 앱을 만들기 위해 __CAPGO_KEEP_0__ 네비게이션 및 전환을 사용하고, 수평 스크롤이나 안전 영역이 잘려 나가는 iOS 레이아웃 문제를 해결하세요.

npx cap sync

Capgo 네이티브 네비게이션 및 전환을 사용하여 네이티브 앱의 느낌을 주세요.

__CAPGO_KEEP_0__에서 __CAPGO_KEEP_1__를 사용하여 네이티브 모바일 느낌을 Vue 앱에 주세요. __CAPGO_KEEP_0__에서 __CAPGO_KEEP_1__를 사용하여 네이티브 모바일 느낌을 Vue 앱에 주세요. __CAPGO_KEEP_0__/__CAPGO_KEEP_1__-native-navigation — iOS에서 Liquid Glass 탭바를 사용하고, Android에서 흐린 탭바 스타일을 사용하세요. Vue 라우터는 라우트 상태를 유지하고, 플러그인은 네이티브 창을 관리합니다..

Capacitor에서 Capgo를 사용하여 네이티브 모바일 느낌을 Vue 앱에 주세요.

capgo에서 capacitor를 사용하여 네이티브 모바일 느낌을 Vue 앱에 주세요. __CAPGO_KEEP_0__에서 __CAPGO_KEEP_1__를 사용하여 네이티브 모바일 느낌을 Vue 앱에 주세요.
@capgo/capacitor-transition — iOS와 WebView layer에서 Ionic-style 페이지 전환 및 iOS edge swipe-back을 사용할 수 있습니다. Ionic 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',
  },
});

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

, capgo-capacitor-__CAPGO_KEEP_2__ 및 capgo-capacitor-__CAPGO_KEEP_2__.

Tailwind CSS에서 장치 안전 영역을 위한 Safe areas

__CAPGO_KEEP_0__-__CAPGO_KEEP_1__를 사용하세요. (capgo에서 출판됨) capgo에 capacitor로 게시됨. __CAPGO_KEEP_0__-친화적인 Tailwind 플러그인인 __CAPGO_KEEP_0__와 같은 __CAPGO_KEEP_0__를 제공합니다. tailwind-capacitor npm safe-areas Capacitor와 같은 Capacitor를 사용하세요.

bun add -D tailwind-capacitor

__CAPGO_KEEP_0__ src/assets/main.css:

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

__CAPGO_KEEP_0__ pt-safe, pb-safe__CAPGO_KEEP_0__ px-safe 대신 뿌리기 env(safe-area-inset-*) Vue 설정을 위해 필요한 모든 것이 없다면 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. 중복된 safe-area 패딩이 헤더, 모달, 레이아웃 wrapper에 적용되어 UI가 잘린 것처럼 보이거나 너무 크게 보이는 경우가 있습니다.

With @capgo/tailwind-capacitor, __CAPGO_KEEP_0__와 같은 패딩을 표현할 수 있는 유틸리티를 사용할 수 있습니다. pt-safe pb-safe px-safe on that single shell.

Capacitor iOS `contentInset` 를 `never` 첫 번째로

In capacitor.config.ts, contentInsetMode: 'css'native inset을 비활성화하고 CSS (또는 Native Navigation의

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

)가 safe area를 관리하도록 하세요: Capacitor의 자동 콘텐츠 인셋과 CSS를 혼합하지 마세요. env(safe-area-inset-*) padding은 일반적으로 두 줄 간격의 원인입니다.

실제로 넘치는 요소를 찾으세요

일반적으로 원인은 요소가 사용하는 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, duplicated safe-area padding, 또는 고정 너비 컨테이너 — viewport meta 태그 자체가 아닌

결론

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

Capgo이 제공하는 방법을 통해 더 나은 앱을 더 빠르게 빌드하는 방법을 알아보세요. __CAPGO_KEEP_0__ 무료 계정으로 가입하세요. 오늘.

Capacitor와 함께 Vue로 모바일 앱을 빌드하는 방법

__CAPGO_KEEP_0__를 사용 중이라면 Vue와 Capacitor를 사용하여 모바일 앱을 빌드하는 방법 __CAPGO_KEEP_0__와 연결하여 capgo/capacitor-live-activities를 사용하여 capgo/capacitor-live-activities에서 사용하는 네이티브 기능을 위해 capgo/capacitor-live-activities를 사용하여 capgo/capacitor-live-activities에서 구현하는 구체적인 세부사항을 위해 capgo/capacitor-video-player를 사용하여 capgo의 내장 기능을 사용하는 @capacitor-video-player에 대해 @capgo/capacitor-video-player capgo의 구현 세부 사항을 사용하는 @capacitor-video-player에 대해, @capgo/capacitor-native-navigation을 사용하는 capgo의 내장 기능을 사용하는 @capacitor-native-navigation에 대해

Vue와 Capacitor를 사용한 모바일 앱 개발

Capacitor에 대해 알아보기

Vue 앱 준비

플랫폼을 추가하고, Capacitor은 프로젝트의 루트 디렉토리에 각 플랫폼에 대한 폴더를 생성합니다:

__CAPGO_KEEP_0__

Capacitor Live Reload

Capacitor 패키지를 임포트하고 Capacitor 함수를 호출하세요.

Capgo에서 __CAPGO_KEEP_1__를 사용하여 네이티브 모바일 느낌을 Vue 앱에 주세요.

Tailwind CSS에서 장치 안전 영역을 위한 Safe areas

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

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

iOS 안전 영역을 단일 루트 wrapper에서만 처리하세요

Capacitor iOS `contentInset` 를 `never` 첫 번째로

실제로 넘치는 요소를 찾으세요

결론

Capacitor와 함께 Vue로 모바일 앱을 빌드하는 방법

Vue와 Capacitor를 사용한 모바일 앱 개발

Capacitor에 대해 알아보기

Vue 앱 준비

플랫폼을 추가하고, Capacitor은 프로젝트의 루트 디렉토리에 각 플랫폼에 대한 폴더를 생성합니다:

__CAPGO_KEEP_0__

Capacitor Live Reload

Capacitor 패키지를 임포트하고 Capacitor 함수를 호출하세요.

Capgo에서 __CAPGO_KEEP_1__를 사용하여 네이티브 모바일 느낌을 Vue 앱에 주세요.

Tailwind CSS에서 장치 안전 영역을 위한 Safe areas

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

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

iOS 안전 영역을 단일 루트 wrapper에서만 처리하세요

Capacitor iOS contentInset 를 never 첫 번째로

실제로 넘치는 요소를 찾으세요

결론

Capacitor와 함께 Vue로 모바일 앱을 빌드하는 방법

Capacitor iOS `contentInset` 를 `never` 첫 번째로