always serve absolute cdn url

Author: fago

src/runtime/server/api/app-loader.js.get.ts

@@ -1,4 +1,4 @@
-import { defineEventHandler, setResponseHeader } from 'h3'
+import { defineEventHandler, setResponseHeader, getRequestURL } from 'h3'
 import { useRuntimeConfig } from '#imports'
 // @ts-expect-error - Virtual import
 import entryPath from '#nuxt-entry-path'
@@ -11,8 +11,17 @@ export default defineEventHandler((event) => {
   const buildId = config.app.buildId
   const baseURL = config.app.baseURL || '/'
   const buildAssetsDir = config.app.buildAssetsDir || '/_nuxt/'
-  const cdnURL = config.app.cdnURL || ''
-  const entryPathValue = entryPath
+
+  // Set cdnURL - use config if set, otherwise use the current request's origin.
+  let cdnURL = config.app.cdnURL
+  if (!cdnURL) {
+    const requestURL = getRequestURL(event)
+    cdnURL = requestURL.port
+      ? `${requestURL.protocol}//${requestURL.hostname}:${requestURL.port}`
+      : `${requestURL.protocol}//${requestURL.host}`
+  }
+
+  const entryPathValue = cdnURL + entryPath
 
   // Serialize public config (with componentPreview enabled)
   // Only include what's needed for the client
@@ -39,7 +48,7 @@ export default defineEventHandler((event) => {
       teleports.id = 'teleports';
       document.body.insertBefore(teleports, nuxt.nextSibling);
 
-      // Add Nuxt data script
+      // Add Nuxt data script - minimal client-side initialization
       const nuxtData = document.createElement('script');
       nuxtData.type = 'application/json';
       nuxtData.setAttribute('data-nuxt-data', 'nuxt-app');

test/basic.test.ts

@@ -29,4 +29,35 @@ describe('nuxt-component-preview module', async () => {
     expect(script).toContain('function initNuxt()')
     expect(script).toContain('componentPreview')
   })
+
+  it('app-loader.js always sets cdnURL', async () => {
+    const script = await $fetch('/nuxt-component-preview/app-loader.js', {
+      responseType: 'text',
+    })
+
+    // Check that cdnURL is used in window.__NUXT__.config
+    expect(script).toContain('window.__NUXT__.config')
+    expect(script).toContain('cdnURL:')
+
+    // Verify the cdnURL is properly set in the generated config
+    // The script should include cdnURL in the app config section
+    const configMatch = script.match(/cdnURL:\s*"([^"]*)"/)
+    expect(configMatch).toBeTruthy()
+
+    // The cdnURL should be set to a valid URL (from request origin)
+    if (configMatch && configMatch[1]) {
+      const cdnURL = configMatch[1]
+      expect(cdnURL).toBeTruthy()
+      // Should be a valid URL with protocol and host
+      expect(cdnURL).toMatch(/^https?:\/\/[^\/]+/)
+    }
+
+    // Check that entry module src uses the same URL
+    const entryMatch = script.match(/entry\.src\s*=\s*'([^']+)'/)
+    expect(entryMatch).toBeTruthy()
+    if (entryMatch && configMatch) {
+      // Entry src should start with cdnURL
+      expect(entryMatch[1]).toContain(configMatch[1])
+    }
+  })
 })

test/preview-dev.test.ts

@@ -79,6 +79,7 @@ describe('preview E2E (dev mode)', async () => {
       expect(componentContent.hasCardStructure).toBe(true)
       await page.close()
     })
+
   })
 
   describe('without app-loader.js (manual setup)', () => {