Obfuscate a Vue app

Vue 3 apps build with Vite, and AfterPack integrates at the bundler level, so @afterpack/vue is a thin wrapper: afterpackVue(options) is afterpackVite(options), named for discoverability in a Vue project.

Legacy Vue CLI projects build with webpack instead of Vite. Use @afterpack/webpack there.

Install

$ npm install -D @afterpack/vue

// 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

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

Writes the combined Protection Map to the gitignored .afterpack/protectionMap.html. The source-map side effect and the handling rules are @afterpack/vite's.

Options

Every configuration key can be passed here as the options object, forwarded verbatim to @afterpack/vite. The type alias AfterpackVueOptions is AfterpackViteOptions.

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:

// 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: the full matrix.
• Vite: the plugin doing the actual work.
• Nuxt: the Nuxt 3 module over the same plugin.
• Protection Map: reading the report.
• Builds & CI: seeds, dev-vs-prod, promoting the same bytes.