# Obfuscate a Vue app

@afterpack/vue wraps @afterpack/vite for Vue 3 projects: one plugin line in vite.config.ts.

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

Vue 3 apps build with [Vite](https://www.afterpack.dev/docs/frameworks/vite), and AfterPack integrates at the **[bundler](https://www.afterpack.dev/docs/frameworks)** level, so `@afterpack/vue` is a thin wrapper: `afterpackVue(options)` *is* [`afterpackVite(options)`](https://www.afterpack.dev/docs/frameworks/vite), named for discoverability in a Vue project.

Legacy **Vue CLI** projects build with webpack instead of Vite. Use [`@afterpack/webpack`](https://www.afterpack.dev/docs/frameworks/webpack) there.

## Install

```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()],
});
```

Place it **after** `vue()`. The named export is `afterpackVue`; the package also re-exports `afterpackVite` and the `AfterpackViteOptions` type.

## Build

`vite build` now emits obfuscated output. `vite dev` is untouched, because the plugin only runs on the build's `generateBundle`, before Vite writes the bundle.

## Verify

```ts
afterpackVue({ protectionMap: { enabled: true } });
```

Writes the combined [Protection Map](https://www.afterpack.dev/docs/protection-map) to the gitignored `.afterpack/protectionMap.html`. The source-map side effect and the handling rules are [`@afterpack/vite`](https://www.afterpack.dev/docs/frameworks/vite#verify)'s.

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

## Options

Every [configuration key](https://www.afterpack.dev/docs/config) can be passed here as the options object, forwarded verbatim to [`@afterpack/vite`](https://www.afterpack.dev/docs/frameworks/vite#options). The type alias `AfterpackVueOptions` is `AfterpackViteOptions`.

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

## Directives

A `/* @afterpack … */` marker inside a `.vue` file is not captured. Put directives in a plain `.ts`/`.js` module the component imports instead:

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

Every emitted chunk is obfuscated either way; only the directive needs the plain module.

## Next

- [Frameworks](https://www.afterpack.dev/docs/frameworks): the full matrix.
- [Vite](https://www.afterpack.dev/docs/frameworks/vite): the plugin doing the actual work.
- [Nuxt](https://www.afterpack.dev/docs/frameworks/nuxt): the Nuxt 3 module over the same plugin.
- [Protection Map](https://www.afterpack.dev/docs/protection-map): reading the report.
- [Builds & CI](https://www.afterpack.dev/docs/builds): seeds, dev-vs-prod, promoting the same bytes.