Convierta su aplicación Nuxt a iOS y Android con Capacitor 8

Introducción

Tiene una aplicación web Nuxt existente? En esta guía, aprenderá a transformarla en aplicaciones móviles nativas de iOS y Android utilizando Capacitor 8 — la última versión con mejor rendimiento y nuevas características.

Capacitor envuelve su aplicación web en un contenedor nativo, brindándole acceso a APIs de dispositivo como cámara, sistema de archivos y notificaciones push, mientras mantiene su código base de Vue existente. A diferencia de Flutter o React Native, no necesita reescribir nada — su Nuxt code se ejecuta tal cual.

Lo que aprenderá:

Configure su aplicación Nuxt existente para generación estática
Agregar Capacitor 8 con plugins nativos esenciales
Crear y probar en simuladores de iOS y Android
Habilitar recarga en vivo para un desarrollo más rápido
Agregar opcionalmente Konsta UI para componentes que se ven nativos

¿Buscas empezar un nuevo proyecto desde cero? Consulta nuestra guía sobre Crear una aplicación móvil de Nuxt desde cero.

Ventajas de usar Nuxt y Capacitor

Reutilización de Code: Compartir componentes y lógica Vue entre aplicaciones web y móviles.
Rendimiento: La generación estática de Nuxt crea paquetes optimizados perfectos para móviles.
Capacidades Nativas: Acceda a características de dispositivo como cámara, geolocalización y sistema de archivos a través de Capacitor plugins.
Desarrollo Simplificado: Utilice patrones Vue/Nuxt familiares sin aprender desarrollo nativo.

Requisitos Previos

Antes de comenzar, asegúrese de tener:

Node.js 18+ instalado
Una aplicación existente Nuxt 4 Xcode
installed (para el desarrollo de iOS, solo macOS)
Android Studio (para el desarrollo de Android)

Configuración de su aplicación Nuxt para dispositivos móviles

El primer paso es configurar su aplicación Nuxt para la generación estática. Capacitor necesita archivos HTML/JS/CSS estáticos para empaquetar en la aplicación nativa.

Asegúrese de que su package.json tenga el script de generación:

{
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "mobile": "bun run generate && bunx cap sync",
    "mobile:ios": "bun run mobile && bunx cap open ios",
    "mobile:android": "bun run mobile && bunx cap open android"
  }
}

Importante: Si está utilizando características del lado del servidor (API rutas, middleware del servidor, etc.), necesitará refactorizarlas para utilizar alternativas del lado del cliente o APIs externas.

Pruebe la generación estática ejecutando:

bun run generate

Debería ver un .output/public carpeta con sus archivos estáticos. Esto es lo que Capacitor empaquetará en su aplicación nativa.

Agregar Capacitor 8 a su proyecto

Para empaquetar su aplicación Nuxt en un contenedor móvil nativo, siga estos pasos:

Instale Capacitor core y CLI:

bun add @capacitor/core
bun add -D @capacitor/cli

Instale los plugins Capacitor comunes que probablemente necesitará:

bun add @capacitor/app @capacitor/keyboard @capacitor/splash-screen @capacitor/status-bar @capacitor/preferences

Estos plugins proporcionan características esenciales:

@capacitor/app: Maneja eventos de ciclo de vida de la aplicación (anterior/plano, enlaces profundos)
@capacitor/teclado: Controla el comportamiento del teclado en móvil
@capacitor/pantalla-de-inicio: Administra la pantalla de inicio nativa
@capacitor/barra-de-estado: Estiliza la barra de estado del dispositivo
@capacitor/preferencias: Almacenamiento de valores clave (como localStorage pero nativo)

Inicializa Capacitor con los detalles de tu proyecto:

bunx cap init my-app com.example.myapp --web-dir .output/public

Sustituye my-app por el nombre de tu aplicación y com.example.myapp por el ID de tu aplicación (notación de dominio inverso).

Crear o actualizar el capacitor.config.ts archivo con la configuración adecuada:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: '.output/public',
  plugins: {
    SplashScreen: {
      launchShowDuration: 2000,
      launchAutoHide: true,
      androidScaleType: 'CENTER_CROP',
      splashFullScreen: true,
      splashImmersive: true,
    },
    Keyboard: {
      resize: 'body',
      resizeOnFullScreen: true,
    },
    StatusBar: {
      style: 'dark',
    },
  },
};

export default config;

Instala las plataformas nativas:

bun add @capacitor/ios @capacitor/android

Agrega las carpetas de la plataforma nativa:

bunx cap add ios
bunx cap add android

Capacitor creará ios y carpetas en la raíz de tu proyecto que contienen los proyectos nativos. android Para construir el proyecto de Android, necesitas

Android Studio . Para iOS, necesitas un Mac conXcode Construye y sincroniza tu proyecto:.

Esto ejecuta tu script personalizado que genera la compilación estática de Nuxt y sincroniza los archivos con las plataformas nativas.

bun run mobile

Desarrollar y Desplegar Aplicaciones Móviles Nativas

Para construir y desplegar tu aplicación móvil nativa, sigue estos pasos:

Para desarrollar aplicaciones de iOS, necesitas tener

Xcode y carpetas en la raíz de tu proyecto que contienen los proyectos nativos. instalado, y para aplicaciones de Android, necesitas tener Android Studio instalado. Además, si planeas distribuir tu aplicación en la tienda de aplicaciones, necesitas inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play para Android.

Abrir los proyectos nativos:

Para iOS:

bun run mobile:ios

Para Android:

bun run mobile:android

O directamente con Capacitor CLI:

bunx cap open ios
bunx cap open android

Compilar y ejecutar la aplicación:

android-studio-run

En Android Studio, espera a que el proyecto esté listo, y luego haz clic en el botón “Ejecutar” para desplegar la aplicación en un dispositivo conectado o emulador.

xcode-run

En Xcode, configura tu cuenta de firma para desplegar la aplicación en un dispositivo real. Si no lo has hecho antes, Xcode te guiará a través del proceso (ten en cuenta que necesitas estar inscrito en el Programa de Desarrolladores de Apple). Una vez configurado, haz clic en el botón “Reproducir” para ejecutar la aplicación en tu dispositivo conectado.

¡Felicidades! Has desplegado con éxito tu aplicación web de Nuxt en un dispositivo móvil.

Pero espera, hay una forma más rápida de hacer esto durante el desarrollo…

Capacitor Live Reload

Durante el desarrollo, puedes aprovechar la recompilación en vivo para ver los cambios instantáneamente en tu dispositivo móvil. Para habilitar esta característica, sigue estos pasos:

Encuentra tu dirección IP local:

En macOS, ejecuta el siguiente comando en la terminal:
```
ipconfig getifaddr en0
```
En Windows, ejecuta:
```
ipconfig
```
Busca la dirección IPv4 en la salida.

Actualiza tu capacitor.config.ts para que apunte a tu servidor de desarrollo:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: '.output/public',
  server: {
    url: 'http://YOUR_IP_ADDRESS:3000',
    cleartext: true,
  },
  plugins: {
    // ... your plugin config
  },
};

export default config;

Sustituye YOUR_IP_ADDRESS With tu dirección IP local (por ejemplo, 192.168.1.100).

Aplica los cambios a tu proyecto nativo:

bunx cap copy

La copy La orden copia la carpeta web y los cambios de configuración al proyecto nativo sin actualizar el proyecto completo.

Inicia tu servidor de desarrollo de Nuxt y reconstruye en Xcode/Android Studio:

bun run dev

Ahora, cada vez que hagas cambios en tu aplicación de Nuxt, la aplicación móvil se recargará automáticamente para reflejar esos cambios.

Nota: Si instales nuevos plugins o haces cambios en archivos nativos, necesitarás reconstruir el proyecto nativo ya que la recarga en vivo solo se aplica a cambios web code.

Usando Capacitor Plugins

Los plugins Capacitor te permiten acceder a características de dispositivos nativos desde tu aplicación de Nuxt. Exploraremos cómo usar el plugin Compartir como ejemplo:

Instale el plugin de Compartir:

bun add @capacitor/share

Crear o actualizar una página para utilizar el plugin de Compartir. En Nuxt 4, las páginas se encuentran en app/pages/:

<template>
  <div class="p-6">
    <h1 class="text-2xl font-bold mb-4">Welcome to Nuxt + Capacitor!</h1>
    <button
      @click="shareContent"
      class="px-6 py-3 bg-blue-600 text-white rounded-lg font-semibold"
    >
      Share now!
    </button>
  </div>
</template>

<script setup lang="ts">
import { Share } from '@capacitor/share';

async function shareContent() {
  await Share.share({
    title: 'Check this out!',
    text: 'Built with Nuxt and Capacitor',
    url: 'https://capacitorjs.com',
    dialogTitle: 'Share with friends',
  });
}
</script>

Sincronice los cambios con el proyecto nativo:

bun run mobile

O sincronice sin reconstruir:

bunx cap sync

Reconstruya y ejecute la aplicación en su dispositivo.

Ahora, cuando haga clic en el botón 'Compartir ahora!', se mostrará el diálogo de compartir nativo.

Agregar Konsta UI v5 con Tailwind CSS 4

Para hacer que el botón tenga un aspecto más móvil, puede agregar Konsta UI para componentes nativos de iOS y Android.

Necesita tener Tailwind CSS 4 ya instalado.

Instale los paquetes requeridos:

bun add konsta
bun add tailwindcss @tailwindcss/vite

Configure el plugin Vite en nuxt.config.ts:

import tailwindcss from '@tailwindcss/vite';

export default defineNuxtConfig({
  compatibilityDate: '2025-01-15',
  devtools: { enabled: true },
  css: ['~/assets/css/main.css'],
  vite: {
    plugins: [tailwindcss()],
  },
});

Crear app/assets/css/main.css:

@import 'tailwindcss';
@import 'konsta/theme.css';

Envuelve tu aplicación con Konsta UI App componente en app/app.vue:

<template>
  <App theme="ios">
    <NuxtPage />
  </App>
</template>

<script setup>
import { App } from 'konsta/vue';
</script>

Actualiza tu página para utilizar componentes de Konsta UI:

<template>
  <Page>
    <Navbar title="My App" />

    <Block strong>
      <p>
        Here is your Nuxt & Konsta UI app. Let's see what we have here.
      </p>
    </Block>

    <BlockTitle>Navigation</BlockTitle>
    <List>
      <ListItem href="/about/" title="About" />
      <ListItem href="/form/" title="Form" />
    </List>

    <Block strong class="flex space-x-4">
      <Button>Button 1</Button>
      <Button>Button 2</Button>
    </Block>
  </Page>
</template>

<script setup>
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
  BlockTitle,
} from 'konsta/vue';
</script>

Agregar fuente Roboto para tema de Material Design en nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    head: {
      link: [
        { rel: 'preconnect', href: 'https://fonts.googleapis.com' },
        { rel: 'preconnect', href: 'https://fonts.gstatic.com', crossorigin: '' },
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap',
        },
      ],
    },
  },
  // ... rest of config
});

Tu aplicación de Nuxt debería tener ahora una interfaz de usuario móvil nativa:

Conclusión

Has convertido exitosamente tu aplicación web existente de Nuxt en aplicaciones nativas de iOS y Android utilizando Capacitor 8. Ahora tu código de Vue se ejecuta nativamente en dispositivos móviles con acceso a APIs de dispositivo.

Lo que lograste:

Configuraste Nuxt para generación estática
Agregar Capacitor 8 con plugins esenciales
Desarrollado y desplegado a simuladores de iOS y Android
Habilitado el recarga en vivo para desarrollo
Opcionalmente agregado Konsta UI para componentes que parecen nativos

Pasos siguientes:

Configuración Capgo para actualizaciones por aire sin la necesidad de volver a subir la aplicación a la tienda
Agregar más plugins nativos como Cámara, Ubicación Geográfica o Notificaciones Push
Configurar iconos de la aplicación y pantallas de bienvenida para producción
Preparar la aplicación para la presentación en App Store y Google Play

Iniciando un proyecto nuevo? Consulte Creando una aplicación móvil de Nuxt desde cero para una guía paso a paso.

Recursos

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

Sigue adelante desde Convertir tu aplicación Nuxt a iOS y Android con Capacitor 8

Si estás utilizando Convertir tu aplicación Nuxt a iOS y Android con Capacitor 8 para planificar el trabajo de plugin nativo, conectarlo con Capgo Directorio de Plugins para el flujo de trabajo del producto en Capgo Directorio de Plugins, Capacitor Plugins por Capgo para el detalle de implementación en Capacitor Plugins por Capgo, Agregar o Actualizar Plugins para el detalle de implementación en Agregar o Actualizar Plugins, Alternativas de Plugins de Ionic Enterprise para el flujo de trabajo del producto en Alternativas de Plugins de Ionic Enterprise, y Capgo Compilaciones Nativas para el flujo de trabajo del producto en Capgo Compilaciones Nativas.