[Feature]: use vue 3.5 useId

[RayGuo-ergou]

Describe the feature

Since vue released 3.5 and has a ssr friendly useId, would be better to switch to it.

I can think something like this for backward compatibility

import * as v from 'vue';

// @ts-expect-error vue 3.5
if (v.useId) {
  // @ts-expect-error vue 3.5
  return v.useId();
}

Additional information

• I intend to submit a PR for this feature.
• I have already implemented and/or tested this feature.

[Dino-Kupinic]

Is this still required?
I'm on Nuxt 3.13.1 and Vue 3.5.3

[RayGuo-ergou]

The ConfigProvider is still required unless migrated vue's useId in this lib.

The error you see is because muxt changed their useId to be an alias of vue's. And it could be undefined if not in an instance (e.g. toast) so you have to handle it yourself.

update: toast is fine, the id was not from radix-vue, thus IMO in most case it should be defined.

[zernonia]

Correct @RayGuo-ergou . Your suggestion here should eliminate the need of passing idFunction in Nuxt 3.13.1 onwards, and hence avoiding the ts error above 😁

[RayGuo-ergou]

Hi @zernonia should still handle the typescript error above tho as: https://github.com/vuejs/core/blob/b1430f250d6aef7f866d9a670895d83596119b42/packages/runtime-core/src/helpers/useId.ts#L8

Even tho I am not a big fan of ! but in this case I feel it's safe to do it as the places call useId should under a vue app instance.

But this should indeed resolve the hydration mismatch issue.

[Saeid-Za]

I was thinking to provide a default value for the config provider, at later stages we could mark useId as deprecated.
But wouldn't import * from "vue" disable tree shaking?
If so, could we sync import useId when version criteria is satisfied?
If I'm not mistaken, require is not supported in vite without a plugin.

[RayGuo-ergou]

But wouldn't import * from "vue" disable tree shaking?

Tried to build a simple project in both way, the file size seems identical. I am guessing due to vue's well structure export, vite can auto tree shaking the import.

If so, could we sync import useId when version criteria is satisfied?

I would suggest the nuxt way, make the useId as alias of vue's useId

[RayGuo-ergou]

Did a quick test

// index.js

import * as util from './util'

util.foo()

// util.js

function foo() {
  console.log('foo')
}
function bar() {
  console.log('bar')
}

export {
  bar,
  foo,
}

run pnpx rollup index.js -f esm -o bundle.js

get

cat bundle.js
───────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────
       │ File: bundle.js
───────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────
   1   │ function foo() {
   2   │   console.log('foo');
   3   │ }
   4   │
   5   │ foo();

[donPuerto]

any update on how to resolve the issue?

[Dino-Kupinic]

any update on how to resolve the issue?

We are waiting for a PR, you can still use ConfigProvider like i mentioned above. If you get an error just <!-- @vue-ignore -->

<template>
  <!-- @vue-ignore -->
  <ConfigProvider :use-id="useIdFunction">
    <NuxtLayout>
      <NuxtPage />
      <Toaster />
    </NuxtLayout>
  </ConfigProvider>
</template>