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

[Jannchie]

🔗 Linked issue

• resolve NuxtLink with target="_blank" doesn't render correctly #23737

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Now, such a link will automatically append the baseURL.

  <div>
    <NuxtLink to="/about" target="_blank">link with target</NuxtLink>
  </div>

This should be a breaking change. because it's possible that someone could explicitly add baseURL to the to attribute to get around the bug.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[Mini-ghost]

Hi! I happen to be researching this issue as well. Would you like to consider some other ideas?

let href = typeof to.value === 'object' ? router.resolve(to.value)?.href ?? null : to.value || null

if (href && href.startsWith('/') && !href.startsWith('//')) {
  const _base = withLeadingSlash(withTrailingSlash(baseURL))
  if (_base !== '/' && !href.startsWith(_base)) {
    href = joinURL(_base, href)
  }
}

This way, the following examples will work as expected:

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    baseURL: '/app/'
  }
})

<template>
  <NuxtLink to="http://localhost:3000/app/about" target="_blank">
    link with target and protocol
  </NuxtLink>
  <!--
    Output:
    <a href="http://localhost:3000/app/about" rel="noopener noreferrer" target="_blank">
      link with target and baseURL
    </a>
  -->

  <NuxtLink to="//localhost:3000/app/about" target="_blank">
    link with target and starts with `//`
  </NuxtLink>
  <!--
    Output:
    <a href="//localhost:3000/app/about" rel="noopener noreferrer" target="_blank">
      link with target and baseURL
    </a>
  -->

  <NuxtLink to="/app/about" target="_blank">
    link with target and baseURL
  </NuxtLink>
  <!--
    Output:
    <a href="/app/about" rel="noopener noreferrer" target="_blank">
      link with target and baseURL
    </a>
  -->

  <NuxtLink to="/about" target="_blank">
    link with target without baseURL
  </NuxtLink>
  <!--
    Output:
    <a href="/app/about" rel="noopener noreferrer" target="_blank">
      link without target
    </a>
  -->
</template>

[Jannchie]

Hi! I happen to be researching this issue as well. Would you like to consider some other ideas?

Yeah, your idea is better. I modified this pull request with reference to your implementation... Thank you!

[danielroe]

Would you be able to add some tests to cover this?

[Jannchie]

Would you be able to add some tests to cover this?

I've added the test cases!

[lihbr]

LGTM! just a small concern with the checks, and some optional style suggestions for the tests :)

Thanks for making this!

[lihbr]

LGTM, thanks!