feat(nuxt): allow remote sources for islands (#21592)

packages/nuxt/src/app/components/nuxt-island.ts

@@ -36,12 +36,17 @@ export default defineComponent({
     context: {
       type: Object,
       default: () => ({})
+    },
+    source: {
+      type: String,
+      default: () => undefined
     }
   },
   async setup (props, { slots }) {
+    const error = ref<unknown>(null)
     const config = useRuntimeConfig()
     const nuxtApp = useNuxtApp()
-    const hashId = computed(() => hash([props.name, props.props, props.context]))
+    const hashId = computed(() => hash([props.name, props.props, props.context, props.source]))
     const instance = getCurrentInstance()!
     const event = useRequestEvent()
     // TODO: remove use of `$fetch.raw` when nitro 503 issues on windows dev server are resolved
@@ -100,7 +105,8 @@ export default defineComponent({
       const key = `${props.name}_${hashId.value}`
       if (nuxtApp.payload.data[key] && !force) { return nuxtApp.payload.data[key] }
 
-      const url = `/__nuxt_island/${key}`
+      const url = props.source ? new URL(`/__nuxt_island/${key}`, props.source).href : `/__nuxt_island/${key}`
+
       if (process.server && process.env.prerender) {
         // Hint to Nitro to prerender the island component
         appendResponseHeader(event, 'x-nitro-prerender', url)
@@ -130,6 +136,7 @@ export default defineComponent({
           delete nuxtApp[pKey]![uid.value]
         })
       }
+      try {
         const res: NuxtIslandResponse = await nuxtApp[pKey][uid.value]
         cHead.value.link = res.head.link
         cHead.value.style = res.head.style
@@ -137,11 +144,15 @@ export default defineComponent({
           return `nuxt-ssr-component-uid="${getId()}"`
         })
         key.value++
+        error.value = null
         if (process.client) {
           // must await next tick for Teleport to work correctly with static node re-rendering
           await nextTick()
         }
         setUid()
+      } catch (e) {
+        error.value = e
+      }
     }
 
     if (import.meta.hot) {
@@ -160,6 +171,9 @@ export default defineComponent({
     }
 
     return () => {
+      if (error.value && slots.fallback) {
+        return [slots.fallback({ error: error.value })]
+      }
       const nodes = [createVNode(Fragment, {
         key: key.value
       }, [h(createStaticVNode(html.value, 1))])]