Construyendo aplicaciones móviles con Vue y Capacitor

In este tutorial, le guiarémos a través del proceso de convertir una aplicación web de Vue en una aplicación móvil nativa utilizando Capacitor. De manera opcional, también puede mejorar la interfaz de usuario de su aplicación 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 le permite integrar fácilmente en cualquier proyecto web y convertir su aplicación en una aplicación móvil nativa. Genera proyectos de Xcode y Android Studio nativos para usted y proporciona acceso a características de dispositivo nativo como la cámara a través de un puente de JavaScript.

Preparando su aplicación de Vue

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

vue create my-app
cd my-app
npm install

Para preparar su aplicación de Vue para la implementación de móviles nativos, necesitará exportar su proyecto. Agregue un script en su archivo package.json para compilar y copiar el proyecto de Vue:

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

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

Agregar Capacitor a su aplicación de Vue

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

Instala el Capacitor CLI como una dependencia de desarrollo y configúralo dentro de tu proyecto. Acepta los valores predeterminados para el nombre y el 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 la 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 nuevos iOS y android carpetas en tu proyecto de Vue.

Actualiza el archivo capacitor.config.json para que apunte a webDir para el resultado de tu comando de compilación:

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

Ahora, puedes compilar tu proyecto Vue y sincronizarlo con Capacitor:

npm run build
npx cap sync

Desarrollar y Desplegar Aplicaciones Nativas

Para desarrollar aplicaciones iOS, necesitas tener instalado Xcode, y para Android, necesitas tener instalado Android Studio. Además, debes inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play 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

Activa la 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 capacitor.config.ts archivo con la dirección IP y puerto correctos:

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;

Aplica estos cambios copiándolos a tu proyecto nativo:

npx cap copy

Now, your app will automatically reload and show changes when you update your Vue app.

Usando plugins Capacitor

Instale un plugin Capacitor, como el plugin de compartir, y utilícelo en su aplicación Vue:

npm i @capacitor/share

Importe el paquete y llame a la share() función en su 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, ejecute el sync comando y vuelva a desplegar la aplicación en su dispositivo:

npx cap sync

Agregar Konsta UI

Para usar Konsta UI en su aplicación Vue, necesita tener ya instalado tailwind y para instalar el paquete: Para usar Konsta UI en su aplicación Vue, instale el paquete y modifique su tailwind.config.js archivo:

npm i konsta

Envuelve tu aplicación con el App componente en el pages/_app.vue archivo, y utiliza componentes de Konsta UI Vue en tus páginas Vue.

Conclusión

Capacitor es una gran opción para construir aplicaciones nativas basadas en un proyecto web existente. Con la adición de Capgo, es aún más fácil agregar actualizaciones en vivo a tu aplicación, asegurando que tus usuarios siempre tengan acceso a las últimas características y correcciones de errores.

Aprende cómo Capgo puede ayudarte a construir aplicaciones mejoradas más rápido, regístrate para una cuenta gratuita hoy.

Sigue adelante desde Construyendo Aplicaciones Móviles con Vue y Capacitor

Si estás utilizando Construyendo Aplicaciones Móviles con Vue y Capacitor para planificar el comportamiento de medios y interfaz nativa, conecta con ella Usando @capgo/capacitor-actividades-en-vivo para la capacidad nativa en Usando @capgo/capacitor-actividades-en-vivo @capgo/capacitor-actividades-en-vivo para el detalle de implementación en @capgo/capacitor-actividades-en-vivo Usando @capgo/capacitor-reproductor-de-videos para la capacidad nativa en Usando @capgo/capacitor-reproductor-de-videos @capgo/capacitor-reproductor-de-videos para el detalle de implementación en @capgo/capacitor-reproductor-de-videos, y Usando @capgo/capacitor-navegación-nativa para la capacidad nativa en Usando @capgo/capacitor-navegación-nativa.

Crear aplicaciones móviles con Vue y Capacitor