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

Introducción

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

Capacitor envuelve su aplicación web en un contenedor nativo, dando acceso a APIs de dispositivo como cámara, sistema de archivos y notificaciones push mientras mantiene su código base 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
Agregue Capacitor 8 con plugins nativos esenciales
Construya y pruebe en simuladores de iOS y Android
Activar recarga en vivo para un desarrollo más rápido
Agregar opcionalmente Konsta UI para componentes que parecen 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 utilizar Nuxt y Capacitor

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

Requisitos previos

Antes de empezar, asegúrate de tener:

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

Configurando su Aplicación Nuxt para Móvil

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.

Hágase cargo 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á refactorizar esas características 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 comunes Capacitor 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: Maneje eventos de ciclo de vida de la aplicación (anterior/plano, enlaces profundos)
@capacitor/keyboard: Controlar el comportamiento del teclado en dispositivos móviles
@capacitor/splash-screen: Administre la pantalla de bienvenida nativa
@capacitor/status-bar: Estile el barra de estado del dispositivo
@capacitor/preferences: Almacenamiento de valores clave (como localStorage pero nativo)

Inicia 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).

Crea o actualiza el archivo capacitor.config.ts 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á y ios carpetas en la raíz de tu proyecto que contienen los proyectos nativos. android Para compilar el proyecto de Android, necesitas

__CAPGO_KEEP_0__ Android StudioPara iOS, necesitas un Mac con Xcode.

Construye y sincroniza tu proyecto:

bun run mobile

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

Desarrollo de Aplicaciones Móviles Nativas

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

Para desarrollar aplicaciones de iOS, debes tener Xcode instalado, y para aplicaciones de Android, debes tener Android Studio instalado. Además, si planeas distribuir tu aplicación en la tienda de aplicaciones, debes inscribirte en el Programa de Desarrolladores de Apple para iOS y en el Console de Google Play para Android.

Abra 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

Construya y ejecute la aplicación:

android-studio-run

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

xcode-run

En Xcode, configure su cuenta de firma para desplegar la aplicación en un dispositivo real. Si no lo ha hecho antes, Xcode le guiará a través del proceso (tenga en cuenta que necesita estar inscrito en el Programa de Desarrolladores de Apple). Una vez configurado, haga clic en el botón “Reproducir” para ejecutar la aplicación en su dispositivo conectado.

¡Felicidades! Ha desplegado con éxito su 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, puede aprovechar la recarga en vivo para ver los cambios de manera instantánea en su dispositivo móvil. Para habilitar esta función, siga estos pasos:

Encuentre su dirección IP local:

En macOS, ejecute el siguiente comando en la terminal:
```
ipconfig getifaddr en0
```
En Windows, ejecute:
```
ipconfig
```
Busque la dirección IPv4 en el resultado.

Actualice su capacitor.config.ts para que apunte a su 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;

Sustituya YOUR_IP_ADDRESS por su dirección IP local (por ejemplo, 192.168.1.100).

Aplicar los cambios a su proyecto nativo:

bunx cap copy

El copy copiar el comando copia el folder web y los cambios de configuración al proyecto nativo sin actualizar el proyecto completo.

Inicie su servidor de desarrollo de Nuxt y reconstruya en Xcode/Android Studio:

bun run dev

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

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

Usando Capacitor Plugins

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

Instale el plugin de Compartir:

bun add @capacitor/share

Crear o actualizar una página para usar el plugin de Compartir. En Nuxt 4, las páginas van 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 simplemente sincroniza sin reconstruir:

bunx cap sync

Reconstruye y ejecuta la aplicación en tu dispositivo.

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

Agregar Konsta UI v5 con Tailwind CSS 4

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

Necesitas tener Tailwind CSS 4 ya instalado.

Instalar los paquetes requeridos:

bun add konsta
bun add tailwindcss @tailwindcss/vite

Configurar 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 el componente de Konsta UI App __CAPGO_KEEP_0__ app/app.vue:

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

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

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

Agregue la fuente Roboto para el tema de Diseño Material 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
});

Su aplicación de Nuxt debería tener ahora una interfaz de usuario móvil que se vea nativa:

Conclusión

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

Lo que logró:

Configuró Nuxt para la generación estática
Agregó Capacitor 8 con plugins esenciales
Construyó y desplegó en simuladores de iOS y Android
Habilitó la recarga en vivo para el desarrollo
Opcionalmente agregó Konsta UI para componentes que se ven nativos

Pasos siguientes:

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

Está empezando un nuevo proyecto? Consulte Crear 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.

Convierta su aplicación Nuxt en iOS &amp; Android con Capacitor 8