# Ofusca una app de Vue

@afterpack/vue envuelve @afterpack/vite para proyectos de Vue 3: una línea de plugin en vite.config.ts.

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

Las apps de Vue 3 compilan con [Vite](https://www.afterpack.dev/es/docs/frameworks/vite), y AfterPack se integra a nivel de **[bundler](https://www.afterpack.dev/es/docs/frameworks)**, así que `@afterpack/vue` es un envoltorio muy ligero: `afterpackVue(options)` *es* [`afterpackVite(options)`](https://www.afterpack.dev/es/docs/frameworks/vite), con un nombre pensado para que sea fácil de encontrar en un proyecto de Vue.

Los proyectos antiguos de **Vue CLI** compilan con webpack en lugar de Vite. En ellos usa [`@afterpack/webpack`](https://www.afterpack.dev/es/docs/frameworks/webpack).

## Instalación

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

```ts
// vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { afterpackVue } from "@afterpack/vue";

export default defineConfig({
  plugins: [vue(), afterpackVue()],
});
```

Colócalo **después** de `vue()`. La exportación con nombre es `afterpackVue`; el paquete también reexporta `afterpackVite` y el tipo `AfterpackViteOptions`.

## Build

`vite build` emite ahora salida ofuscada. `vite dev` no se toca, porque el plugin solo se ejecuta en el `generateBundle` del build, antes de que Vite escriba el bundle.

## Verificación

```ts
afterpackVue({ 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)*

## Opciones

Cualquier [clave de configuración](https://www.afterpack.dev/es/docs/config) puede pasarse aquí en el objeto de opciones, que se reenvía tal cual a [`@afterpack/vite`](https://www.afterpack.dev/es/docs/frameworks/vite#options). El alias de tipo `AfterpackVueOptions` es `AfterpackViteOptions`.

```ts
afterpackVue({ seed: "git", preset: "medium" });
```

## 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 las directivas en un módulo `.ts`/`.js` normal que el componente importe:

```ts
// src/composables/useLicense.ts
/* @afterpack preset=hard */
export function verify(token: string) {
  // ...
}
/* @afterpack end */
```

Cada chunk emitido se ofusca de todos modos; solo la directiva necesita el módulo normal.

## 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.
- [Nuxt](https://www.afterpack.dev/es/docs/frameworks/nuxt): el módulo de Nuxt 3 sobre el mismo plugin.
- [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.