Creating a unique id is impossible in Nuxt 3

Environment

sandbox@sse-sandbox-u1udu3:/sandbox$ npx nuxi info
Nuxt CLI v3.0.0-27424151.dbab979
RootDir: /sandbox
Nuxt project info:

------------------------------
- Operating System: `Linux`
- Node Version:     `v14.18.1`
- Nuxt Version:     `3.0.0-27424151.dbab979`
- Package Manager:  `yarn@1.22.17`
- Bundler:          `Vite`
- User Config:      `-`
- Runtime Modules:  `-`
- Build Modules:    `-`
------------------------------

👉 Report an issue: https://github.com/nuxt/framework/issues/new

👉 Suggest an improvement: https://github.com/nuxt/framework/discussions/new

👉 Read documentation: https://v3.nuxtjs.org

sandbox@sse-sandbox-u1udu3:/sandbox$

Reproduction

Reproduction URL

If you don’t see the issue at first, try refreshing the preview.

Describe the bug

When attempting to create a unique identifier in a component (using Options API, Composition API, or setup sugar), The id changes between the server and the client.

This makes it impossible for components that require access to a unique HTML id (for accessibility reasons or other) and causes hydration issues.

Additional context

No response

Logs

No response

[jshimkoski]

Thank you. I’ll start up a discussion thread.

Regarding the “why do you need unique IDs” question:

Unique IDs are a pretty big part of accessibility or being able to reference different parts of the DOM for libraries such as popperjs.

One small example related to accessibility is aria-labelby:

<template>
  <span role="checkbox" aria-checked="false" tabindex="0" aria-labelledby="tac"></span>
  <span id="tac">I agree to the Terms and Conditions.</span>
</template>

If you have multiple instances of a component with that code, it breaks the HTML since an id must always be unique.

This issue doesn’t stop there and it’s a pretty common necessity (just do a simple google search to see what I mean).

I wish component instance IDs were baked into Vue 3. It would solve all of this.

Thanks again.

[danielroe]

This didn’t happen in Nuxt 2.

This also throws an error in Nuxt 2: https://codesandbox.io/s/async-cookies-ur28r1?file=/pages/index.vue.

I’m closing this as it’s not an error but a consequence of client-side hydration, but I’d recommend you create a discussion with some more information on what you’re trying to do, what your key needs are, and we can think about how to achieve that. (For example, why do you need unique IDs?)

Note: You may find this section of the Vue docs helpful in answering some of your questions.