# Обфускація застосунку Vue

@afterpack/vue обгортає @afterpack/vite для проєктів Vue 3: один рядок плагіна у vite.config.ts.

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

Застосунки Vue 3 збираються через [Vite](https://www.afterpack.dev/uk/docs/frameworks/vite), а AfterPack інтегрується на рівні **[бандлера](https://www.afterpack.dev/uk/docs/frameworks)**, тож `@afterpack/vue` є тонкою обгорткою: `afterpackVue(options)` — це *і є* [`afterpackVite(options)`](https://www.afterpack.dev/uk/docs/frameworks/vite), лише під назвою, яку легше знайти в проєкті Vue.

Застарілі проєкти **Vue CLI** збираються через webpack, а не Vite. Для них використовуйте [`@afterpack/webpack`](https://www.afterpack.dev/uk/docs/frameworks/webpack).

## Встановлення

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

Розмістіть його **після** `vue()`. Іменований експорт називається `afterpackVue`; пакет також реекспортує `afterpackVite` і тип `AfterpackViteOptions`.

## Збірка

Тепер `vite build` видає обфускований результат. `vite dev` не зачіпається, бо плагін працює лише на етапі `generateBundle` збірки, до того як Vite запише бандл.

## Перевірка

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

Записує об'єднану [Protection Map](https://www.afterpack.dev/uk/docs/protection-map) у внесений у gitignore `.afterpack/protectionMap.html`. Побічний ефект щодо source map і правила поводження з ним ті самі, що в [`@afterpack/vite`](https://www.afterpack.dev/uk/docs/frameworks/vite#verify).

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

## Параметри

Будь-який [ключ конфігурації](https://www.afterpack.dev/uk/docs/config) можна передати тут в об'єкті параметрів, і він дослівно передається в [`@afterpack/vite`](https://www.afterpack.dev/uk/docs/frameworks/vite#options). Псевдонім типу `AfterpackVueOptions` дорівнює `AfterpackViteOptions`.

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

## Директиви

Директиви — це можливість тарифу [Pro](https://www.afterpack.dev/uk/docs/pro). У [збірці Free](https://www.afterpack.dev/uk/docs/directives#free-builds) директива, яка посилює захист, зупиняє збірку з помилкою `DIAG_PRO_DIRECTIVE_REQUIRES_KEY`.

Маркер `/* @afterpack … */` усередині файлу `.vue` не захоплюється. Натомість розмістіть директиви у звичайному модулі `.ts`/`.js`, який імпортує компонент:

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

Кожен згенерований чанк обфускується в будь-якому разі; звичайний модуль потрібен лише для директиви.

## Далі

- [Фреймворки](https://www.afterpack.dev/uk/docs/frameworks): повна матриця.
- [Vite](https://www.afterpack.dev/uk/docs/frameworks/vite): плагін, який виконує всю роботу.
- [Nuxt](https://www.afterpack.dev/uk/docs/frameworks/nuxt): модуль Nuxt 3 поверх того самого плагіна.
- [Protection Map](https://www.afterpack.dev/uk/docs/protection-map): як читати звіт.
- [Збірки та CI](https://www.afterpack.dev/uk/docs/builds): сіди, dev проти prod, просування тих самих байтів.