Dans ce guide de tutoriel, nous vous guiderons à travers le processus de conversion d'une application web Vue en application mobile native en utilisant Capacitor. Vous pouvez également ajouter Capgo la navigation native et les transitions pour un sentiment d'application mobile native, et utiliser tailwind-capacitor pour les zones de sécurité.
À propos de Capacitor
Capacitor est un outil révolutionnaire qui vous permet d'intégrer facilement Capacitor dans tout projet web et de convertir votre application en application mobile native. Il génère des projets Xcode et Android Studio natifs pour vous et vous donne accès aux fonctionnalités de dispositif natif comme la caméra à travers un pont JavaScript.
Préparation de votre application Vue
Créez d'abord une nouvelle application Vue en exécutant la commande suivante :
vue create my-app
cd my-app
npm installPour préparer votre application Vue pour le déploiement mobile natif, vous aurez besoin d'exporter votre projet. Ajoutez un script dans votre fichier Après avoir exécuté la Vous devriez voir un nouveau
{
"scripts": {
// ...
"build": "vue-cli-service build"
}
}Ce dossier sera utilisé par plus tard. build Intégration de à votre application Vue dist folder in your project’s root directory. This folder will be used by Capacitor later.
Adding Capacitor to Your Vue App
Installez le package principal et les packages pertinents pour les plateformes iOS et Android.
-
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.
-
Installez le package principal et les packages pertinents pour les plateformes iOS et 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 androidVous devriez maintenant voir de nouvelles iOS et android dossiers dans votre projet Vue.
Mettez à jour le fichier capacitor.config.json pour pointer vers le résultat de votre commande de build : Maintenant, vous pouvez construire votre projet Vue et le synchroniser avec __CAPGO_KEEP_0__ : Construire et déployer des applications natives
{
"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 syncBuild and Deploy Native Apps
To développer des applications iOS, vous avez besoin d'installer Xcode, et pour les applications Android, vous avez besoin d'installer Android Studio. De plus, vous devez vous inscrire au programme Apple Developer pour les applications iOS et au Google Play Console pour les applications Android pour distribuer votre application sur l'app store.
Utilisez les Capacitor CLI pour ouvrir les projets natives à la fois :
npx cap open ios
npx cap open androidDéployez votre application sur un appareil connecté à l'aide d'Android Studio ou Xcode.
Capacitor Live Reload
Activez le rechargement en direct sur votre appareil mobile en faisant en sorte que l'application Capacitor charge le contenu à partir d'une URL spécifique de votre réseau.
Trouvez votre adresse IP locale et mettez à jour le capacitor.config.ts fichier avec l'adresse IP et le port corrects :
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;Appliquez ces modifications en les copiant vers votre projet native :
npx cap copyMaintenant, votre application se rechargera automatiquement et affichera les modifications lorsque vous mettez à jour votre application Vue.
En utilisant les Capacitor Plugins
Installez un plugin Capacitor, tel que le plugin de partage, et utilisez-le dans votre application Vue :
npm i @capacitor/shareImportez le package et appelez la share() fonction dans votre application :
<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>Après l'installation de nouveaux plugins, exécutez la sync commande et redéployez l'application sur votre appareil :
npx cap syncEnsuite, vous pouvez rendre l'application plus native sur iOS et Android avec la navigation et les transitions Capgo et résolvez les problèmes de mise en page iOS courants qui entraînent un débordement horizontal ou des zones de sécurité coupées.
UI native avec la navigation et les transitions Capgo Native
J'ai travaillé pendant des années avec Ionic pour construire des applications cross-platform, mais l'intégration avec Vue est hacky et rarement justifiée lorsque vous avez déjà Tailwind CSS.
Pour un sentiment mobile natif dans une application Vue + Capacitor, utilisez les plugins Capgo au lieu des kits UI web uniquement comme Konsta UI :
- @capgo/capacitor-native-navigation — barre de navigation native, barre de Liquid Glass sur iOS, et un style de barre de tab flou sur Android. Votre routeur Vue conserve l'état de la route ; le plugin gère la barre de chrome native.
- @capgo/capacitor-transitions Des transitions de page telles que sur Ionic, ainsi que la possibilité de faire glisser vers l'arrière sur iOS dans la couche WebView, sans adopter l'interface utilisateur d'Ionic.
Installez les deux :
bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap syncConfigurez la navigation native avec le mode d'insertion CSS pour que le contenu web respecte les barres natives :
import { NativeNavigation } from '@capgo/capacitor-native-navigation';
await NativeNavigation.configure({
contentInsetMode: 'css',
animationDuration: 360,
glass: {
effect: 'liquidGlass',
},
});Affichez une barre de tab de verre liquide (iOS utilise la mise en page système ; Android utilise un arrière-plan flou 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}`);
});Ajoutez des transitions de page natives dans votre coquille d'application :
<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>Wrappez les pages routées dans cap-router-outlet, cap-pageet cap-contentet appelez setDirection('forward') ou setDirection('back') context : Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `alternatives_cta_questions`). Page/zone : page de comparaison des alternatives de mise à jour en direct de Capacitor. Rôle : Paragraphe marketing ou juridique long. Voir dans : page alternatives.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `alternatives_cta_questions` (Questions de CTA pour les alternatives). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `appflow_cta_questions`). Page/zone : page de comparaison/migration de Appflow. Rôle : Paragraphe marketing ou juridique long. Voir dans : page ionic-appflow.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `appflow_cta_questions` (Questions de CTA pour Appflow). | Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `capwesome_cta_questions`). Page/zone : page de comparaison de Capawesome. Rôle : Paragraphe marketing ou juridique long. Voir dans : page capwesome.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `capwesome_cta_questions` (Questions de CTA pour Capwesome). | Page/zone : page de services de consulting. Rôle : Sous-titre ou tagline de section. Voir dans : page consulting.astro. Conservez les termes de produit et de marque de Capgo ainsi que les termes de développeur exactement. Clé de message `consulting_faq_subtitle` (Sous-titre FAQ pour les services de consulting). | Page/zone : page de comparaison/migration de Appflow. Rôle : Étiquette de navigation ou élément de navigation court. Voir dans : page ionic-appflow.astro, page ionic-enterprise-plugins.astro, page solutions/ionic-enterprise-plugins.astro. Clé de message `appflow_plugins_or` (Appflow Plugins Or).
avant de naviguer. N'ajoutez pas de titres ou de pieds de page web en doublon lorsque la navigation native possède ces surfaces. En utilisant @capgo/capacitor-navigation native et En utilisant @capgo/capacitor-transitions.
Aires sûres avec Tailwind
Pour les zones sûres de l'appareil dans Tailwind CSS, utilisez @capgo/tailwind-capacitor (publié sur tailwind-capacitor npm). Il fournit safe-areas des utilitaires et d'autres plugins de Tailwind compatibles avec Capacitor :
bun add -D tailwind-capacitorDans src/assets/main.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";Utilisez des utilitaires comme pt-safe, pb-safe, et px-safe au lieu de les répandre env(safe-area-inset-*) à la main. Le projet est actuellement développé — si quelque chose manque pour votre configuration Vue, open a PR on GitHub.
Résoudre les problèmes de mise en page iOS (Vueport, Zone de sécurité, et Débordement horizontal)
Si le contenu semble coupé, décalé ou scrollable horizontalement sur iOS, ajouter plus overflow-x: hidden ou ajuster seul le tag de vueport ne suffit généralement pas. Travaille à travers ces vérifications dans l'ordre.
Assurez-vous que le tag meta de vueport est appliqué correctement
Ajoutez le tag meta de vueport dans index.html dans <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />Gère la zone de sécurité iOS à partir d'un seul wrapper racine
Créez une coquille d'application unique et appliquez-y la mise en page de la zone de sécurité — et non dans plusieurs composants imbriqués :
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);
}Enveloppez tout le contenu de la page à l'intérieur .app-shell. La mise en forme de la zone de sécurité dans les en-têtes, les modaux et les enveloppes de mise en page est souvent dupliquée, ce qui donne l'impression que l'interface utilisateur est coupée ou trop grande.
Avec @capgo/tailwind-capacitor, vous pouvez exprimer la même mise en forme avec des utilitaires comme pt-safe pb-safe px-safe sur cette seule coquille.
Définissez Capacitor iOS contentInset sur never premier
Dans capacitor.config.ts, préférez la mise en forme native de la zone de sécurité désactivée et laissez CSS (ou la navigation native) contentInsetMode: 'css'prendre en charge la zone de sécurité :
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'dist',
ios: {
contentInset: 'never',
},
};Mélanger les mise en forme automatiques de contenu de Capacitor avec CSS env(safe-area-inset-*) le padding est une cause fréquente de double espace.
Trouvez l'élément qui déborde vraiment.
Le coupable habituel est un élément utilisant 100vw, Tailwind w-screen, une largeur de pixels fixe, ou une large min-width.
Dans l'inspecteur Web Safari, exécutez :
[...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,
}));Avec Tailwind, remplacez w-screen par w-full lorsque possible. De nombreux problèmes de débordement horizontal proviennent de 100vw / w-screen, de la duplication de la marge de sécurité, ou d'un conteneur à largeur fixe — et non de la balise meta de la vue portée elle-même.
Conclusion
Capacitor est une excellente option pour créer des applications natives basées sur un projet web existant. Avec l'ajout de Capgo, il est encore plus facile d'ajouter des mises à jour en temps réel à votre application, vous assurant que vos utilisateurs aient toujours accès aux dernières fonctionnalités et corrections de bogues.
Apprenez comment Capgo peut vous aider à créer des applications meilleures et plus rapides, inscrivez-vous à un compte gratuit aujourd'hui.
Continuez à partir de Créer des applications mobiles avec Vue et Capacitor
Si vous utilisez Créer des applications mobiles avec Vue et Capacitor pour planifier le comportement des médias et de l'interface native, connectez-l’avec Utiliser @capgo/capacitor-activités-en-vie pour la capacité native dans Utiliser @capgo/capacitor-activités-en-vie @capgo/capacitor-activités-en-vie pour le détail d'implémentation dans @capgo/capacitor-activités-en-vie Utiliser @capgo/capacitor-lecteur-de-videos pour la capacité native dans Utilisation de @capgo/capacitor-player-visionnaire, @capgo/capacitor-player-visionnaire pour le détail d'implémentation dans @capgo/capacitor-player-visionnaire, et Utilisation de @capgo/capacitor-navigation-native pour la capacité native dans Utilisation de @capgo/capacitor-navigation-native.
