fix(nuxt): resolve internal target: blank links with base

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

@@ -1,12 +1,11 @@
 import type { ComputedRef, DefineComponent, InjectionKey, PropType } from 'vue'
 import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, resolveComponent } from 'vue'
 import type { RouteLocation, RouteLocationRaw } from '#vue-router'
-import { hasProtocol, parseQuery, parseURL, withTrailingSlash, withoutTrailingSlash } from 'ufo'
-
+import { hasProtocol, joinURL, parseQuery, parseURL, withLeadingSlash, withTrailingSlash, withoutTrailingSlash } from 'ufo'
 import { preloadRouteComponents } from '../composables/preload'
 import { onNuxtReady } from '../composables/ready'
 import { navigateTo, useRouter } from '../composables/router'
-import { useNuxtApp } from '../nuxt'
+import { useNuxtApp, useRuntimeConfig } from '../nuxt'
 import { cancelIdleCallback, requestIdleCallback } from '../compat/idle-callback'
 
 // @ts-expect-error virtual file
@@ -280,8 +279,15 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
 
         // Resolves `to` value if it's a route location object
         // converts `""` to `null` to prevent the attribute from being added as empty (`href=""`)
-        const href = typeof to.value === 'object' ? router.resolve(to.value)?.href ?? null : to.value || null
+        let href = typeof to.value === 'object' ? router.resolve(to.value)?.href ?? null : to.value || null
 
+        // joins with `baseURL` if it's an relative link
+        if (href && href.startsWith('/') && !href.startsWith('//')) {
+          const baseURL = useRuntimeConfig().app.baseURL
+          if (href !== '/' && !href.startsWith(baseURL)) {
+            href = joinURL(withLeadingSlash(withTrailingSlash(baseURL)), href)
+          }
+        }
         // Resolves `target` value
         const target = props.target || null
 

packages/nuxt/test/nuxt-link.test.ts

@@ -2,6 +2,16 @@ import { describe, expect, it, vi } from 'vitest'
 import type { RouteLocation, RouteLocationRaw } from 'vue-router'
 import type { NuxtLinkOptions, NuxtLinkProps } from '../src/app/components/nuxt-link'
 import { defineNuxtLink } from '../src/app/components/nuxt-link'
+import { useRuntimeConfig } from '../src/app/nuxt'
+
+// mocks `useRuntimeConfig()`
+vi.mock('../src/app/nuxt', () => ({
+  useRuntimeConfig: vi.fn(() => ({
+    app: {
+      baseURL: '/'
+    }
+  }))
+}))
 
 // Mocks `h()`
 vi.mock('vue', async () => {
@@ -125,6 +135,21 @@ describe('nuxt-link:propsOrAttributes', () => {
       it('defaults to `null`', () => {
         expect(nuxtLink({ to: 'https://nuxtjs.org' }).props.target).toBe(null)
       })
+
+      it('target="_blank" with baseURL', () => {
+        vi.mocked(useRuntimeConfig).withImplementation(() => {
+          return {
+            app: {
+              baseURL: '/base'
+            }
+          } as any
+        }, () => {
+          expect(nuxtLink({ to: '/to', target: '_blank' }).props.href).toBe('/base/to')
+          expect(nuxtLink({ to: '/base/to', target: '_blank' }).props.href).toBe('/base/to')
+          expect(nuxtLink({ to: 'http://nuxtjs.org/app/about', target: '_blank' }).props.href).toBe('http://nuxtjs.org/app/about')
+          expect(nuxtLink({ to: '//nuxtjs.org/app/about', target: '_blank' }).props.href).toBe('//nuxtjs.org/app/about')
+        })
+      })
     })
 
     describe('rel', () => {