---
description: Why Vue's runtime compiler needs unsafe-eval under a Content Security Policy, how to avoid it, and how to report violations to Report URI.
---

# Vue

Vue's CSP story is narrower than most, and it comes down to one decision: which build you ship. The full build compiles templates in the browser using `new Function()`, which a strict policy blocks unless you allow `'unsafe-eval'` - and allowing that undoes a good deal of what the policy is for.

## What Vue gives you

- A **runtime-only build**, which contains no template compiler and therefore never calls `new Function()`. This is the CSP-friendly option and it is roughly 30% smaller.
- Build-time template compilation. Templates inside `*.vue` single-file components are pre-compiled to JavaScript by the build step, so the compiler is not needed at runtime at all.
- A CSP-compliant build for environments that forbid `new Function()` outright.

## Which build you end up with

You need the full build - and therefore `'unsafe-eval'` - only if you compile templates in the browser: passing a string to the `template` option, or mounting to an element and using its in-DOM HTML as the template.

If you use single-file components with a normal build pipeline, you are already able to ship runtime-only. Confirm it rather than assume, because the full build is a common default in older setups and the failure is silent under a report-only policy.

## Setting the header

Vue does not serve your application, so the header comes from whatever does - see our [Nginx](/frameworks/nginx/), [Express](/frameworks/express/) or [Netlify](/platforms/netlify/) pages. Your URL comes from the [Setup](https://report-uri.com/account/setup/) page:

    Content-Security-Policy-Report-Only: default-src 'self'; script-src 'self'; report-uri https://abc123.report-uri.com/r/d/csp/reportOnly

Deploy that in report-only and watch for `'unsafe-eval'` violations. If they appear, you are shipping the full build.

## Things to watch for

- Reaching for `'unsafe-eval'` to make the errors stop is the wrong fix. It weakens the policy globally to work around a build choice you can change.
- If you need per-request nonces and server rendering, that is Nuxt's territory rather than plain Vue - see our [Nuxt](/frameworks/nuxt/) page.
- Scoped styles and CSS-in-JS approaches can still require `style-src 'unsafe-inline'`. Keep that scoped to styles and out of `script-src`.

## Official documentation

[Vue.js - Security](https://vuejs.org/guide/best-practices/security.html)

## Start Monitoring with Report URI

**Already using us for CSP?** Find your report-uri value on [Setup](https://report-uri.com/account/setup/), or view your [CSP reports](https://report-uri.com/account/reports/csp/).

**New to Report URI?** Create an account and grab your report-uri value from the [Setup](https://report-uri.com/account/setup/) page.

[Start your free trial](https://report-uri.com/register/?plan=starter2025)