fix(csp): remove unsafe-eval requirement for Vue3 production builds (#4159)

Author: ildyria

app/Http/Middleware/DisableCSP.php

@@ -69,10 +69,6 @@ public function handle(Request $request, \Closure $next): mixed
 	 */
 	private function handleVueJS()
 	{
-		// We have to disable unsafe-eval because Livewire requires it...
-		// So stupid....
-		config(['secure-headers.csp.script-src.unsafe-eval' => true]);
-
 		// if the public/hot file exists, it means that we need to disable CSP completely
 		// As we will be reloading on the fly the page and Vite has poor CSP support.
 		if (File::exists(public_path('hot'))) {

resources/js/app.ts

@@ -43,7 +43,7 @@ const langs = import.meta.glob("../../lang/*.json");
  * registering components with the application instance so they are ready
  * to use in your application's views. An example is included for you.
  */
-const app = createApp({});
+const app = createApp(AppComponent);
 app.config.globalProperties.window = window;
 app.use(pinia);
 app.use(PrimeVue, {
@@ -64,7 +64,6 @@ app.directive("ripple", Ripple);
 app.directive("focustrap", FocusTrap);
 app.directive("tooltip", Tooltip);
 
-app.component("App", AppComponent);
 app.use(router);
 app.use(ToastService);
 app.use(ConfirmationService);

vite.config.ts

@@ -83,7 +83,7 @@ const baseConfig = {
 		alias: {
 			// @ts-ignore-next-line
 			"@": fileURLToPath(new URL("./resources/js/", import.meta.url)),
-			vue: "vue/dist/vue.esm-bundler.js",
+			vue: "vue/dist/vue.runtime.esm-bundler.js",
 		},
 	},
 	build: {

vite.embed.config.ts

@@ -19,7 +19,7 @@ export default defineConfig({
 	resolve: {
 		alias: {
 			'@': fileURLToPath(new URL('./resources/js/', import.meta.url)),
-			vue: 'vue/dist/vue.esm-bundler.js',
+			vue: 'vue/dist/vue.runtime.esm-bundler.js',
 		},
 	},
 	build: {