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__에 의해 나중에 사용됩니다. __CAPGO_KEEP_0__를 Vue 앱에 추가하는 방법

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

자연스러운 모바일 컨테이너로 변환하려면 다음 단계를 따르세요: 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는 프로젝트의 루트 디렉토리에 플랫폼별 폴더를 생성합니다:

__CAPGO_KEEP_0__를 Vue 앱에 추가하는 방법

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. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정하세요. 이름과 번들 ID에 대한 기본값을 수락하세요.

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

__CAPGO_KEEP_0__.config.json 파일을 업데이트하여 __CAPGO_KEEP_0__의 빌드 결과를指向하십시오. iOS and android 폴더가 Vue 프로젝트에 생성되었습니다.

__CAPGO_KEEP_0__.config.json 파일을 업데이트하여 __CAPGO_KEEP_0__의 빌드 결과를指向하십시오. capacitor와 Vue 프로젝트를 동기화할 수 있습니다. __CAPGO_KEEP_0__와 Vue 프로젝트를 빌드하고 동기화하십시오. Native 앱을 빌드하고 배포하십시오. __CAPGO_KEEP_0__와 Vue 프로젝트를 동기화할 수 있습니다.

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

Capacitor와 Vue 프로젝트를 빌드하고 동기화하십시오.

npm run build
npx cap sync

Native 앱을 빌드하고 배포하십시오.

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

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

npx cap open ios
npx cap open android

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

Capacitor Live Reload

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

네트워크 내의 자신의 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;

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

npx cap copy

__CAPGO_KEEP_0__ 플러그인을 설치하고, 예를 들어 공유 플러그인을 설치하여 Vue 앱에서 사용하십시오.

패키지를 임포트하고 Capacitor 함수를 호출하십시오.

Capacitor를 사용하여 __CAPGO_KEEP_1__을 __CAPGO_KEEP_2__합니다.

npm i @capacitor/share

__CAPGO_KEEP_0__를 사용하여 __CAPGO_KEEP_1__을 __CAPGO_KEEP_2__합니다. 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 Next, iOS와 Android에서 더 자연스러운 경험을 위해 __CAPGO_KEEP_0__ 네비게이션과 전환을 사용하고, 수평 스크롤이나 안전 영역이 잘려 나가는 문제를 해결하세요.

npx cap sync

Capgo 네이티브 네비게이션과 전환으로 Native-feeling UI를 구현하세요.

Capgo를 사용하여 여러 해 동안

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 — native navbar, iOS에서 Liquid Glass tab bar, Android에서 블러드 탭 바 스타일을 사용하세요. Vue router는 경로 상태를 유지하고, 플러그인은 네이티브 창을 관리합니다.
• @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') ,

, Using @capgo/capacitor-native-navigation 및 Using @capgo/capacitor-transitions.

안전 영역에 대한 Tailwind

Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor (__CAPGO_KEEP_0__으로 출판됨) tailwind-capacitor 다음과 같은 npm- 친화적인 Tailwind 플러그인을 제공합니다: safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

다음과 같은 유틸리티를 사용하세요: 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 설정을 위해 필요한 것이 빠져 있는 경우, __CAPGO_KEEP_0__ 에 PR을 열어보세요. open a PR on GitHub.

iOS에서 콘텐츠가 잘려나거나-shifted되거나 가로 스크롤이 가능하다면, 뷰포트 태그를 더 추가하거나 조정하는 것만으로는 해결되지 않습니다. 이러한 체크를 순서대로 진행하세요.

뷰포트 메타 태그가 올바르게 적용되었는지 확인하세요. overflow-x: hidden 뷰포트 메타 태그를 추가하세요.

내부

iOS 안전 영역을 한 개의 루트 wrapper에서만 처리하세요. index.html 싱글 앱 셸을 생성하고 안전 영역 패딩을 적용하세요 — 여러 개의 중첩된 컴포넌트에서만 적용하지 마세요: <head>:

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

모든 페이지 콘텐츠를 내부에 감싸세요.

iOS에서 콘텐츠가 잘려나거나-shifted되거나 가로 스크롤이 가능하다면, 뷰포트 태그를 더 추가하거나 조정하는 것만으로는 해결되지 않습니다. 이러한 체크를 순서대로 진행하세요.

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에서, pt-safe pb-safe px-safe 같은 패딩을 표현할 수 있는 유틸리티들처럼

Set Capacitor iOS contentInset __CAPGO_KEEP_0__ iOS never 를

첫 번째로 capacitor.config.tsIn contentInsetMode: '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-*) __CAPGO_KEEP_0__은 기존 웹 프로젝트를 기반으로 하는 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. __CAPGO_KEEP_1__을 추가함으로써, 앱에 실시간 업데이트를 더 쉽게 추가할 수 있으며, 사용자들은 항상 최신 기능과 버그 수정에 접근할 수 있습니다.

padding이 두 줄 간격의 일반적인 원인입니다.

Safari Web Inspector에서 실행: 100vwTailwind에서 w-screen가능한 경우, min-width.

Tailwind에서

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

viewport meta 태그 자체가 아닌, w-screen Tailwind에서 w-full 결론 100vw / w-screen__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

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_0__ 무료 계정으로 가입하세요. 오늘.

Capacitor와 Vue를 사용하여 모바일 앱을 빌드하는 방법

__CAPGO_KEEP_0__를 사용하여 native 미디어 및 인터페이스 동작을 계획하는 경우, __CAPGO_KEEP_0__를 연결하세요. @Capacitor/__CAPGO_KEEP_1__-live-activities를 사용하여 native 기능을 사용하는 경우 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-live-activities @capgo/capacitor-live-activities @capgo/capacitor-live-activities @capgo/capacitor-video-player를 사용하여 native 기능을 사용하는 경우 @capgo/capacitor-video-player를 사용하여 native 기능을 사용하는 경우 @capgo/capacitor-video-player를 사용하여 native 기능을 사용하는 경우 capgo/capacitor-video-player를 사용하는 원시 기능에 대해 capgo/capacitor-video-player capgo/capacitor-video-player의 구현 세부 사항에 대해 capgo/capacitor-native-navigation을 사용하는 capgo/capacitor-native-navigation의 원시 기능에 대해