# Ofusca una app de Nuxt

@afterpack/nuxt es un módulo de Nuxt 3 que registra @afterpack/vite en la configuración de Vite de Nuxt.

Source: https://www.afterpack.dev/es/docs/frameworks/nuxt

Nuxt 3 empaqueta con Vite, y AfterPack se integra a nivel de **bundler**, así que `@afterpack/nuxt` es un módulo de Nuxt muy ligero: llama a `addVitePlugin` para registrar [`@afterpack/vite`](https://www.afterpack.dev/es/docs/frameworks/vite) en la configuración de Vite de Nuxt, y el bundle de cliente se ofusca en el `generateBundle` de Vite, antes de que se escriba el build.

Los proyectos de Nuxt 2 compilan con webpack. En ellos usa [`@afterpack/webpack`](https://www.afterpack.dev/es/docs/frameworks/webpack).

## Instalación

```bash
npm install -D @afterpack/nuxt
```

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@afterpack/nuxt"],
  afterpack: {
    seed: "git",
  },
});
```

Las opciones van bajo la clave de configuración `afterpack`.

## Build

`nuxt generate` (estático) o `nuxt build` (SSR) emiten ahora salida ofuscada. `nuxt dev` no se toca, porque el plugin solo se ejecuta en el `generateBundle` de Vite. Se registra una instancia nueva del plugin `@afterpack/vite` por cada entorno de Vite (cliente y servidor), y cada una ofusca su propio bundle antes de que Vite lo escriba.

### Estático frente a servidor

- **Estático / prerenderizado** (`nuxt generate`): se ofusca el bundle de cliente prerenderizado en `.output/public/_nuxt/`. Es la forma recomendada de publicar código de cliente protegido.
- **Servidor (SSR)**: el bundle de cliente se ofusca de la misma manera; el bundle del servidor Nitro es tu propio artefacto de despliegue.

Fija [`seed: "git"`](https://www.afterpack.dev/es/docs/config#seed) cuando quieras que las partes de cliente de una misma versión se compilen con la misma semilla, o cuando un build tenga que ser reproducible byte a byte (aciertos de caché, snapshots de referencia). [Builds y CI](https://www.afterpack.dev/es/docs/builds) explica el equilibrio. Nuxt también genera un `buildId` nuevo en cada build.

## Verificación

```ts
export default defineNuxtConfig({
  modules: ["@afterpack/nuxt"],
  afterpack: { protectionMap: { enabled: true } },
});
```

Escribe el [Protection Map](https://www.afterpack.dev/es/docs/protection-map) combinado en `.afterpack/protectionMap.html`, ignorado por git. El efecto secundario sobre los source maps y las reglas para manejarlos son los de [`@afterpack/vite`](https://www.afterpack.dev/es/docs/frameworks/vite#verify).

*(live Protection Map demo embed — see https://www.afterpack.dev/protection-map-demo)*

Para comprobar un despliegue, ejecuta `npx afterpack@latest verify .output/public` antes de subirlo. Nitro copia ahí el build de cliente protegido, y [`verify`](https://www.afterpack.dev/es/docs/cli#afterpack-verify-dir) comprueba la copia contra el recibo de protección del build y nombra cualquier archivo que haya cambiado.

## Opciones

Cualquier [clave de configuración](https://www.afterpack.dev/es/docs/config) puede pasarse bajo la clave de configuración `afterpack`, que se reenvía tal cual a [`@afterpack/vite`](https://www.afterpack.dev/es/docs/frameworks/vite#options), por ejemplo `afterpack: { preset: "hard", complexity: 40 }`. El alias de tipo `AfterpackNuxtOptions` es `AfterpackViteOptions`.

## Directivas

Las directivas son una función [Pro](https://www.afterpack.dev/es/docs/pro). En un [build Free](https://www.afterpack.dev/es/docs/directives#free-builds), una directiva que aumenta la protección detiene el build con `DIAG_PRO_DIRECTIVE_REQUIRES_KEY`.

Un marcador `/* @afterpack … */` dentro de un archivo `.vue` no se captura. Pon la directiva en un módulo `.ts`/`.js` normal (un composable, un archivo de `utils/`) que el componente importe.

## Siguiente

- [Frameworks](https://www.afterpack.dev/es/docs/frameworks): la matriz completa.
- [Vite](https://www.afterpack.dev/es/docs/frameworks/vite): el plugin que hace el trabajo real.
- [Vue](https://www.afterpack.dev/es/docs/frameworks/vue): una app de Vue 3 + Vite sin más.
- [Protection Map](https://www.afterpack.dev/es/docs/protection-map): cómo leer el informe.
- [Builds y CI](https://www.afterpack.dev/es/docs/builds): semillas, desarrollo frente a producción y promocionar los mismos bytes.