Crear aplicaciones móviles con Vue y Capacitor

En este tutorial, te guiamos a través del proceso de convertir una aplicación web de Vue en una aplicación móvil nativa utilizando Capacitor. Opcionalmente, también puedes mejorar tu interfaz de usuario móvil con Konsta UI, una biblioteca de interfaz de usuario móvil basada en Tailwind CSS.

Sobre Capacitor

Capacitor es una herramienta revolucionaria que te permite integrar fácilmente en cualquier proyecto web y convertir tu aplicación en una aplicación móvil nativa. Genera proyectos Xcode y Android Studio nativos para ti y proporciona acceso a características de dispositivos nativos como la cámara a través de un puente de JavaScript.

Preparando tu aplicación de Vue

Primero, crea una nueva aplicación Vue ejecutando el siguiente comando:

vue create my-app
cd my-app
npm install

Para preparar tu aplicación Vue para la implementación móvil nativa, necesitarás exportar tu proyecto. Agrega un script en tu archivo package.json para construir y copiar el proyecto Vue:

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

Después de ejecutar el build comando, deberías ver un nuevo dist carpeta en el directorio raíz de tu proyecto. Esta carpeta se utilizará por Capacitor más adelante.

Agregar Capacitor a Tu Aplicación Vue

Para convertir tu aplicación web Vue en un contenedor móvil nativo, sigue estos pasos:

Instala el Capacitor CLI como dependencia de desarrollo y configúralo dentro de tu proyecto. Acepta los valores predeterminados para nombre y ID de paquete durante la configuración.
Instala el paquete principal y los paquetes relevantes para las plataformas iOS y Android.
Agrega las plataformas, y Capacitor creará carpetas para cada plataforma en el directorio raíz de tu proyecto:

# 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

Deberías ver ahora nuevos iOS y android carpetas en tu proyecto Vue.

Actualice el archivo capacitor.config.json para que apunte el webDir al resultado de su comando de compilación:

{
  "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__: "Build and Deploy Native Apps"

To desarrollar aplicaciones iOS, necesitas instalar Xcode, y para aplicaciones Android, necesitas instalar Android Studio. Además, debes inscribirte en el Apple Developer Program para iOS y en el Google Play Console para Android para distribuir tu aplicación en la tienda de aplicaciones.

Utiliza los Capacitor CLI para abrir ambos proyectos nativos:

npx cap open ios
npx cap open android

Despliega tu aplicación en un dispositivo conectado utilizando Android Studio o Xcode.

Capacitor Live Reload

Habilita el recarga en vivo en tu dispositivo móvil teniendo la aplicación Capacitor cargar el contenido desde una URL específica en tu red.

Encuentra tu dirección IP local y actualiza el archivo con la dirección IP y el puerto correctos: capacitor.config.ts Aplica estos cambios copiándolos a tu proyecto nativo:

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;

Ahora, tu aplicación se recargará automáticamente y mostrará cambios cuando actualices tu aplicación Vue.

npx cap copy

Utilizando __CAPGO_KEEP_0__ Plugins

Instala un plugin Capacitor, como el plugin de Compartir, y úsalo en tu aplicación Vue:

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

npm i @capacitor/share

__CAPGO_KEEP_0__ share() función en tu aplicación:

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

Después de instalar nuevos plugins, ejecuta el sync comando y vuelve a desplegar la aplicación en tu dispositivo:

npx cap sync

Agregar Konsta UI

Para utilizar Konsta UI en tu aplicación Vue, necesitas tener ya instalado y para instalar el paquete: tailwind.config.js Para utilizar Konsta UI en tu aplicación Vue, instala el paquete y modifica tu

npm i konsta

archivo: App Envuelve tu aplicación con el pages/_app.vue componente en el

archivo, y utiliza componentes de Konsta UI Vue en tus páginas Vue.

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.

Learn how Capgo can help you build better apps faster, Aprende cómo __CAPGO_KEEP_0__ puede ayudarte a crear aplicaciones mejoradas de manera más rápida, regístrate para una cuenta gratuita

Crear Aplicaciones Móviles con Vue y Capacitor