From 7b992007b091d1b5a4d2ee60ab047d6fd91c94b3 Mon Sep 17 00:00:00 2001
From: Alexander <github@lichter.io>
Date: Tue, 27 Feb 2024 00:30:09 +0100
Subject: [PATCH 1/2] chore: make it css-selector compatible

---
 packages/nuxt/src/app/composables/id.ts | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/nuxt/src/app/composables/id.ts b/packages/nuxt/src/app/composables/id.ts
index 728ebcf23810..3e6587010be2 100644
--- a/packages/nuxt/src/app/composables/id.ts
+++ b/packages/nuxt/src/app/composables/id.ts
@@ -3,6 +3,7 @@ import { useNuxtApp } from '../nuxt'
 import { clientOnlySymbol } from '#app/components/client-only'
 
 const ATTR_KEY = 'data-n-ids'
+const SEPARATOR = '_'
 
 /**
  * Generate an SSR-friendly unique identifier that can be passed to accessibility attributes.
@@ -13,7 +14,8 @@ export function useId (key?: string): string {
     throw new TypeError('[nuxt] [useId] key must be a string.')
   }
   // TODO: implement in composable-keys
-  key = key.slice(1)
+  // Make sure key starts with a letter to be a valid selector
+  key = `n${key.slice(1)}`
   const nuxtApp = useNuxtApp()
   const instance = getCurrentInstance()
 
@@ -26,11 +28,11 @@ export function useId (key?: string): string {
   instance._nuxtIdIndex ||= {}
   instance._nuxtIdIndex[key] ||= 0
 
-  const instanceIndex = key + ':' + instance._nuxtIdIndex[key]++
+  const instanceIndex = key + SEPARATOR + instance._nuxtIdIndex[key]++
 
   if (import.meta.server) {
     const ids = JSON.parse(instance.attrs[ATTR_KEY] as string | undefined || '{}')
-    ids[instanceIndex] = key + ':' + nuxtApp._id++
+    ids[instanceIndex] = key + SEPARATOR + nuxtApp._id++
     instance.attrs[ATTR_KEY] = JSON.stringify(ids)
     return ids[instanceIndex]
   }

From ff5fe4fe9d6df4ab40e012b421730e7b9c3addba Mon Sep 17 00:00:00 2001
From: Alexander Lichter <github@lichter.io>
Date: Tue, 27 Feb 2024 10:45:45 +0100
Subject: [PATCH 2/2] Update packages/nuxt/src/app/composables/id.ts

---
 packages/nuxt/src/app/composables/id.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/nuxt/src/app/composables/id.ts b/packages/nuxt/src/app/composables/id.ts
index 3e6587010be2..c5019b0c2b48 100644
--- a/packages/nuxt/src/app/composables/id.ts
+++ b/packages/nuxt/src/app/composables/id.ts
@@ -3,7 +3,7 @@ import { useNuxtApp } from '../nuxt'
 import { clientOnlySymbol } from '#app/components/client-only'
 
 const ATTR_KEY = 'data-n-ids'
-const SEPARATOR = '_'
+const SEPARATOR = '-'
 
 /**
  * Generate an SSR-friendly unique identifier that can be passed to accessibility attributes.