From 4b5e6ff195157fd7211141fd3071810e247739c1 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Thu, 28 Sep 2023 11:08:20 +0100
Subject: [PATCH] feat(nuxt): warn when nesting nuxt links when SSR on dev
 (#23286)

---
 packages/nuxt/src/app/components/nuxt-link.ts | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/nuxt/src/app/components/nuxt-link.ts b/packages/nuxt/src/app/components/nuxt-link.ts
index dd65580a24..8bad73866b 100644
--- a/packages/nuxt/src/app/components/nuxt-link.ts
+++ b/packages/nuxt/src/app/components/nuxt-link.ts
@@ -1,5 +1,5 @@
-import type { ComputedRef, DefineComponent, PropType } from 'vue'
-import { computed, defineComponent, h, onBeforeUnmount, onMounted, ref, resolveComponent } from 'vue'
+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'
 
@@ -12,6 +12,7 @@ import { cancelIdleCallback, requestIdleCallback } from '../compat/idle-callback
 const firstNonUndefined = <T> (...args: (T | undefined)[]) => args.find(arg => arg !== undefined)
 
 const DEFAULT_EXTERNAL_REL_ATTRIBUTE = 'noopener noreferrer'
+const NuxtLinkDevKeySymbol: InjectionKey<boolean> = Symbol('nuxt-link-dev-key')
 
 export type NuxtLinkOptions = {
   componentName?: string
@@ -236,6 +237,15 @@ export function defineNuxtLink (options: NuxtLinkOptions) {
         }
       }
 
+      if (import.meta.dev && import.meta.server && !props.custom) {
+        const isNuxtLinkChild = inject(NuxtLinkDevKeySymbol, false)
+        if (isNuxtLinkChild) {
+          console.log('[nuxt] [NuxtLink] You can\'t nest one <a> inside another <a>. This will cause a hydration error on client-side. You can pass the `custom` prop to take full control of the markup.')
+        } else {
+          provide(NuxtLinkDevKeySymbol, true)
+        }
+      }
+
       return () => {
         if (!isExternal.value) {
           const routerLinkProps: Record<string, any> = {