I think what @jsanwo64 was suggesting was that any scripts tags in your vue components could reference the nonce from the window variable.

<template>
  <script :nonce="nonceValue">
    console.log('Safe inline script');
  </script>
</template>

<script setup>
const nonceValue = window. __CSP_NONCE__;
</script>

But that is assuming you have access to whatever is injecting the script.

Have you made sure the issue still exists when you run npm run build? All the vue stuff should be compiled by vite and it should put the nonce on the script for that....

In addition to what you've done, you need to tell Vite to add the nonce in the middleware via Vite::useCspNonce().

This is from the laravel docs:

        Vite::useCspNonce();
 
        return $next($request)->withHeaders([
            'Content-Security-Policy' => "script-src 'nonce-".Vite::cspNonce()."'",
        ]);

For convenience, it's also worth using Spatie's package: https://github.com/spatie/laravel-csp

Call ->setAppends([]) on the instance and it won't go and get the appended properties when hydrating the model for the front end.