# Nuxt app को obfuscate करें

@afterpack/nuxt एक Nuxt 3 module है जो Nuxt की Vite config पर @afterpack/vite को register करता है।

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

Nuxt 3 Vite से bundle करता है, और AfterPack **bundler** स्तर पर integrate होता है, इसलिए `@afterpack/nuxt` एक पतला Nuxt module है: यह Nuxt की Vite config पर [`@afterpack/vite`](https://www.afterpack.dev/hi/docs/frameworks/vite) को register करने के लिए `addVitePlugin` call करता है, और client bundle Vite के `generateBundle` में, build लिखे जाने से पहले, obfuscate होता है।

Nuxt 2 projects webpack से build होते हैं। वहाँ इसके बजाय [`@afterpack/webpack`](https://www.afterpack.dev/hi/docs/frameworks/webpack) इस्तेमाल करें।

## Install

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

```ts
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ["@afterpack/nuxt"],
  afterpack: {
    seed: "git",
  },
});
```

Options `afterpack` config key के नीचे रहते हैं।

## Build

`nuxt generate` (static) या `nuxt build` (SSR) अब obfuscated output देता है। `nuxt dev` अछूता रहता है, क्योंकि plugin केवल Vite के `generateBundle` पर चलता है। हर Vite environment (client और server) के लिए एक नया `@afterpack/vite` plugin instance register होता है, और हर एक Vite के लिखने से पहले अपना bundle obfuscate करता है।

### Static बनाम server

- **Static / prerendered** (`nuxt generate`): `.output/public/_nuxt/` में prerendered client bundle obfuscate होता है। Protected client code ship करने के लिए यही सुझाई गई बनावट है।
- **Server (SSR)**: client bundle उसी तरह obfuscate होता है; Nitro server bundle आपका अपना deployment artifact है।

[`seed: "git"`](https://www.afterpack.dev/hi/docs/config#seed) तब pin करें जब आप चाहते हैं कि एक release के client हिस्से एक ही seed से build हों, या जब किसी build को byte-reproducible होना हो (cache hits, golden snapshots)। [Builds और CI](https://www.afterpack.dev/hi/docs/builds) इस trade-off को कवर करता है। Nuxt हर build के लिए एक नया `buildId` भी बनाता है।

## Verify

```ts
export default defineNuxtConfig({
  modules: ["@afterpack/nuxt"],
  afterpack: { protectionMap: { enabled: true } },
});
```

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

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

किसी deploy को जाँचने के लिए, upload करने से पहले `npx afterpack@latest verify .output/public` चलाएँ। Nitro protected client build को वहाँ copy करता है, और [`verify`](https://www.afterpack.dev/hi/docs/cli#afterpack-verify-dir) उस copy को build की protection receipt से जाँचता है और बदली गई हर फ़ाइल का नाम बताता है।

## Options

हर [configuration key](https://www.afterpack.dev/hi/docs/config) `afterpack` config key के नीचे दी जा सकती है, और ज्यों की त्यों [`@afterpack/vite`](https://www.afterpack.dev/hi/docs/frameworks/vite#options) को आगे भेजी जाती है, उदाहरण के लिए `afterpack: { preset: "hard", complexity: 40 }`। Type alias `AfterpackNuxtOptions`, `AfterpackViteOptions` ही है।

## 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 नहीं होता। Directive को इसके बजाय एक सादे `.ts`/`.js` module (एक composable, एक `utils/` फ़ाइल) में रखें जिसे component import करता है।

## आगे

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