--- title: Add a cookie consent banner to a Vite app (React or Vue) description: Put the Cookie Compliance snippet first in the head of index.html as classic script tags, ahead of the module entry and your analytics tags. React and Vue single-page apps share this file. Next.js, Nuxt and SvelteKit have their own pages. kind: platform last_verified: 2026-10-22 --- # Add a cookie consent banner to a Vite app (React or Vue) **In short:** paste the **live** snippet into `` of `index.html`, as classic `
``` Vue uses `
` and `/src/main.ts`. The snippet is the same. Prefer pasting the exact HTML from MCP/dashboard rather than retyping `huOptions` keys — the live snippet may carry Consent Mode defaults, `blockingEngine`, or custom providers. Confirmed on Vite React and Vue apps: in the production build the `huOptions` tag and the banner tag keep their order and attributes, and a tracker tag written after them stays after them. Vite moves the app entry into `` as `type="module"`, after those tags. If the snippet is currently created from `main.tsx`, `main.ts`, `useEffect` or Vue's `onMounted`, move it to the top of `` in `index.html`. ## What the order controls The banner holds recognised trackers that load after it until the visitor chooses, in regions whose rule requires consent first. A script placed above the snippet runs straight away, and a script you mark `data-hu-category="1"` is treated as essential. What runs before consent is your decision, so keep analytics and pixels below the snippet. ## Confirm the result Run the browser checks in a private window (banner shows, no tracking cookies before the visitor chooses in a region whose rule requires consent first, trackers start after Allow) with `verify-install` (`skills/verify-install/SKILL.md`) against the running site. Test from a region your strictest rule covers (for example the EU), or confirm region rules are off. Vite-specific extra: | # | Check | Pass | |---|---|---| | V1 | View source (not devtools' rendered DOM), and the built `dist/index.html` | `huOptions` and the `hu-banner.min.js` (or `/v2/…`) tag are the first `