feat: add is external logic from NuxtLink component (#2273)

* Add is external logic from NuxtLink component

* Add test

* Linting

* Use NuxtLinkLocale for external links

Author: TitusKirch

specs/basic_usage.spec.ts

@@ -43,6 +43,9 @@ test('basic usage', async () => {
   expect(await page.locator('#nuxt-link-locale-usages .object-with-named a').getAttribute('href')).toEqual(
     '/category/nintendo'
   )
+  expect(await page.locator('#nuxt-link-locale-usages .external-url a').getAttribute('href')).toEqual(
+    'https://nuxt.com/'
+  )
 
   // Language switching path localizing with `useSwitchLocalePath`
   expect(await page.locator('#switch-locale-path-usages .switch-to-en a').getAttribute('href')).toEqual('/')

specs/fixtures/basic_usage/pages/index.vue

@@ -78,6 +78,9 @@ function onClick() {
             {{ category.title }}
           </NuxtLinkLocale>
         </li>
+        <li class="external-url">
+          <NuxtLinkLocale :to="'https://nuxt.com/'">Nuxt.com</NuxtLinkLocale>
+        </li>
       </ul>
     </section>
     <section id="switch-locale-path-usages">

src/runtime/components/NuxtLinkLocale.ts

@@ -1,5 +1,6 @@
 import { useLocalePath } from '#i18n'
 import { defineComponent, computed, defineNuxtLink, h } from '#imports'
+import { hasProtocol } from 'ufo'
 
 import type { PropType } from 'vue'
 import type { RawLocation, RouteLocation } from '@intlify/vue-router-bridge'
@@ -25,6 +26,29 @@ export default defineComponent({
     const localePath = useLocalePath()
     const resolvedPath = computed(() => (props.to != null ? localePath(props.to, props.locale) : props.to))
 
-    return () => h(NuxtLinkLocale, { ...props, to: resolvedPath }, slots.default)
+    // Resolving link type
+    const isExternal = computed<boolean>(() => {
+      // External prop is explicitly set
+      if (props.external) {
+        return true
+      }
+
+      // When `target` prop is set, link is external
+      if (props.target && props.target !== '_self') {
+        return true
+      }
+
+      // When `to` is a route object then it's an internal link
+      if (typeof props.to === 'object') {
+        return false
+      }
+
+      return props.to === '' || hasProtocol(props.to, { acceptRelative: true })
+    })
+
+    return () =>
+      isExternal.value
+        ? h(NuxtLinkLocale, props, slots.default)
+        : h(NuxtLinkLocale, { ...props, to: resolvedPath }, slots.default)
   }
 })

tsconfig.json

@@ -31,6 +31,7 @@
     "paths": {
       "#app": ["./node_modules/nuxt/dist/app"],
       "#app/*": ["./node_modules/nuxt/dist/app/*"],
+      "#components": ["./.nuxt/components"],
       "#imports": ["./.nuxt/imports.d.ts"],
       "#pages": ["./node_modules/nuxt/dist/pages/runtime/index.d.ts"],
       "#head": ["./node_modules/nuxt/dist/index.d.ts"],