# एक Vue app को obfuscate करें

@afterpack/vue, Vue 3 projects के लिए @afterpack/vite को wrap करता है: vite.config.ts में plugin की एक लाइन।

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

Vue 3 apps [Vite](https://www.afterpack.dev/hi/docs/frameworks/vite) से build होते हैं, और AfterPack **[bundler](https://www.afterpack.dev/hi/docs/frameworks)** स्तर पर integrate होता है, इसलिए `@afterpack/vue` एक पतला wrapper है: `afterpackVue(options)` असल में [`afterpackVite(options)`](https://www.afterpack.dev/hi/docs/frameworks/vite) *ही है*, बस Vue project में आसानी से मिल सके, इसलिए यह नाम रखा गया है।

पुराने **Vue CLI** projects Vite की जगह webpack से build होते हैं। वहाँ [`@afterpack/webpack`](https://www.afterpack.dev/hi/docs/frameworks/webpack) का उपयोग करें।

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

इसे `vue()` के **बाद** रखें। Named export `afterpackVue` है; package `afterpackVite` और `AfterpackViteOptions` type को भी re-export करता है।

## Build

अब `vite build` obfuscated output emit करता है। `vite dev` अछूता रहता है, क्योंकि plugin केवल build के `generateBundle` पर चलता है, Vite के bundle लिखने से पहले।

## Verify

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

संयुक्त [Protection Map](https://www.afterpack.dev/hi/docs/protection-map) को gitignored `.afterpack/protectionMap.html` में लिखता है। Source map से जुड़ा side effect और उसे संभालने के नियम [`@afterpack/vite`](https://www.afterpack.dev/hi/docs/frameworks/vite#verify) वाले ही हैं।

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

## Options

हर [configuration key](https://www.afterpack.dev/hi/docs/config) यहाँ options object के रूप में दी जा सकती है, जिसे ज्यों का त्यों [`@afterpack/vite`](https://www.afterpack.dev/hi/docs/frameworks/vite#options) को आगे भेज दिया जाता है। Type alias `AfterpackVueOptions`, `AfterpackViteOptions` ही है।

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

## Directives

Directives एक [Pro](https://www.afterpack.dev/hi/docs/pro) feature हैं। [Free build](https://www.afterpack.dev/hi/docs/directives#free-builds) में protection बढ़ाने वाला directive build को `DIAG_PRO_DIRECTIVE_REQUIRES_KEY` के साथ रोक देता है।

`.vue` फ़ाइल के अंदर लिखा `/* @afterpack … */` marker capture नहीं होता। इसके बजाय directives को एक सादे `.ts`/`.js` module में रखें जिसे component import करता है:

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

हर emit हुआ chunk दोनों ही सूरतों में obfuscate होता है; सादे module की ज़रूरत केवल directive को है।

## आगे

- [Frameworks](https://www.afterpack.dev/hi/docs/frameworks): पूरी तालिका।
- [Vite](https://www.afterpack.dev/hi/docs/frameworks/vite): वह plugin जो असली काम करता है।
- [Nuxt](https://www.afterpack.dev/hi/docs/frameworks/nuxt): उसी plugin पर बना Nuxt 3 module।
- [Protection Map](https://www.afterpack.dev/hi/docs/protection-map): रिपोर्ट पढ़ना।
- [Builds & CI](https://www.afterpack.dev/hi/docs/builds): seeds, dev बनाम prod, वही bytes promote करना।