Convertir 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 wraps your web app in a native container, giving you access to device APIs like camera, filesystem, and push notifications while keeping your existing Vue codebase. Unlike Flutter or React Native, you don’t need to rewrite anything — your Nuxt code runs as-is.

No necesitas reescribir nada — tu Nuxt __CAPGO_KEEP_1__ se ejecuta tal cual.

Lo que aprenderás:
Add Capacitor 8 with essential native plugins
Agrega __CAPGO_KEEP_0__ 8 con plugins nativos esenciales.
Construye y prueba en simuladores de iOS y Android.
Habilita la recarga en vivo para un desarrollo más rápido.

Opcionalmente, agrega Konsta UI para componentes que se ven nativos. ¿Quieres empezar un nuevo proyecto desde cero? Consulta nuestra guía sobre.

Benefits of Using Nuxt and Capacitor

Ventajas de usar Nuxt y Code:__CAPGO_KEEP_0__ Reutilización: Comparte 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: 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
Un proyecto existente Nuxt 4 idioma objetivo: Español
tokens protegidos: Cloudflare, Capacitor, GitHub, Capgo, code, API, SDK, CLI, npm, bun aplicación
Xcode (solo para desarrollo de iOS y macOS)

Android Studio

The first step is to configure your Nuxt app for static generation. Capacitor needs static HTML/JS/CSS files to bundle into the native app.

Configuración de su aplicación Nuxt para dispositivos móviles package.json El primer paso es configurar su aplicación Nuxt para la generación estática. __CAPGO_KEEP_0__ necesita archivos HTML/JS/CSS estáticos para empaquetar en la aplicación nativa.

{
  "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"
  }
}

Asegúrese de que su If you’re using server-side features (API routes, server middleware, etc.), you’ll need to refactor those to use client-side alternatives or external APIs.

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

bun run generate

Deberías ver una carpeta con tus archivos estáticos. Esto es lo que __CAPGO_KEEP_0__ empaquetará en tu aplicación nativa. .output/public una carpeta con tus archivos estáticos. Esto es lo que Capacitor empaquetará en tu aplicación nativa.

Agregar Capacitor 8 a Tu Proyecto

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

Instala el núcleo de Capacitor y CLI:

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

Instala los plugins de Capacitor comunes que probablemente necesitarás:

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/keyboard: Controla el comportamiento del teclado en móviles
@capacitor/splash-screen: Administra la pantalla de bienvenida nativa
@capacitor/status-bar: Estiliza la barra de estado del dispositivo
@capacitor/preferences: 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).

Crea o actualiza 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

Agregar las carpetas de la plataforma nativa:

bunx cap add ios
bunx cap add android

Capacitor creará ios y android carpetas en la raíz de su proyecto que contienen los proyectos nativos.

Para construir el proyecto de Android, necesita Android Studio. Para iOS, necesita un Mac con Xcode.

Construya y sincronice su proyecto:

bun run mobile

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

Desarrollo y Despliegue de Aplicaciones Nativas

Para construir y desplegar su aplicación móvil nativa, siga estos pasos:

Para desarrollar aplicaciones de iOS, necesitas tener Xcode 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 debes estar inscrito en el Programa de Desarrolladores de Apple). Una vez configurado, haz clic en el botón "Play" 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 recarga 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 apuntar 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 por tu dirección IP local (por ejemplo, 192.168.1.100).

Aplica los cambios a tu proyecto nativo:

bunx cap copy

La copy comando copia el directorio 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 realices 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 realizas cambios en archivos nativos, necesitarás reconstruir el proyecto nativo ya que la recarga en vivo solo se aplica a cambios en el code web.

Usando Capacitor Plugins

Capacitor plugins te permiten acceder a características de dispositivos nativos desde tu aplicación de Nuxt. Exploraremos cómo utilizar los Compartir plugin por ejemplo:

Instale el plugin Compartir:

bun add @capacitor/share

Cree o actualice una página para utilizar el plugin 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!", aparecerá 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';

Envuelva su aplicación con la interfaz de usuario Konsta App componente en 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 la interfaz de usuario Konsta:

<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 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 ve nativa:

Conclusión

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

Lo que logró:

Configurado Nuxt para generación estática
Agregado Capacitor 8 con plugins esenciales
Construido y desplegado a simuladores iOS y Android
Habilitado live reload para desarrollo
Opcionalmente agregado Konsta UI para componentes que se ven nativos

Pasos siguientes:

Configuración Capgo para actualizaciones por aire sin resubmisión en la tienda de aplicaciones
Agregar más plugins nativos como Cámara, Geolocalización o Notificaciones Push
Configurar iconos de la aplicación y pantallas de bienvenida para producción
Preparar su aplicación para la presentación en la Tienda de Mac y Google Play

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

Recursos

Aprenda cómo Capgo puede ayudarlo a construir aplicaciones mejoradas más rápido, regístrese para una cuenta gratuita hoy.

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