N
Nuxt•4w ago
BinaryArtifex

useId() not passing value in function parameter

im trying to create an object list of toast configurations to render a list of toasts. when passing useId into any function exported by the composable it returns undefined 
<script lang="ts" setup>
  const toaster = useToast();

  function handleInfoClick() {
    toaster.info({
      id: useId(), <<---- // passing in id here
      message: "Something interesting has happened",
      onClose: () => console.log("closing toast"),
    });
  }
</script>
<script lang="ts" setup>
  const toaster = useToast();

  function handleInfoClick() {
    toaster.info({
      id: useId(), <<---- // passing in id here
      message: "Something interesting has happened",
      onClose: () => console.log("closing toast"),
    });
  }
</script>
export function useToast() {
  const maxVisibleToasts = ref(3);
  const queue = ref<ToastConfig[]>([]);
  const hasToasts = computed(() => queue.value.length);

  function show(toast: ToastConfig) {
    queue.value.push({
      ...toast,
    });
  }

  function info(toast: Omit<ToastConfig, "variant">) {
    console.log(toast); // <<-----id is undefined
    return show({ ...toast, variant: "info" });
  }

  //...rest of composable
export function useToast() {
  const maxVisibleToasts = ref(3);
  const queue = ref<ToastConfig[]>([]);
  const hasToasts = computed(() => queue.value.length);

  function show(toast: ToastConfig) {
    queue.value.push({
      ...toast,
    });
  }

  function info(toast: Omit<ToastConfig, "variant">) {
    console.log(toast); // <<-----id is undefined
    return show({ ...toast, variant: "info" });
  }

  //...rest of composable
<template>
  <Teleport to="body">
    <ol
      v-if="store.hasToasts"
      class="fixed right-4 bottom-4 flex flex-col-reverse gap-y-2"
      role="region"
      tabindex="-1"
    >
      <li v-for="toast in store.queue.value" :key="toast.id">
        <VToast
          :id="toast.id" // <<------ no id is passed from the queue
          :icon="toast.icon"
          :message="toast.message"
          :title="toast.title"
          :variant="toast.variant"
        />
      </li>
    </ol>
  </Teleport>
</template>

<script lang="ts" setup>
  const store = useToast();
</script>
<template>
  <Teleport to="body">
    <ol
      v-if="store.hasToasts"
      class="fixed right-4 bottom-4 flex flex-col-reverse gap-y-2"
      role="region"
      tabindex="-1"
    >
      <li v-for="toast in store.queue.value" :key="toast.id">
        <VToast
          :id="toast.id" // <<------ no id is passed from the queue
          :icon="toast.icon"
          :message="toast.message"
          :title="toast.title"
          :variant="toast.variant"
        />
      </li>
    </ol>
  </Teleport>
</template>

<script lang="ts" setup>
  const store = useToast();
</script>
2 Replies
kapa.ai
kapa.ai•4w ago
Hi @BinaryArtifex. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I see the issue you're encountering with useId() not passing its value correctly in your toast notification system. This is related to how Vue's useId() composable works in Nuxt. The problem is that useId() must be called during component setup, not during a function call that happens later. When you call useId() inside the parameter of your toaster.info() function, it's not being executed in the proper component context. Solution You should generate the ID during component setup and then reference that value in your function: 
<script lang="ts" setup>
  const toaster = useToast();
  const toastId = useId(); // Generate ID during component setup
  
  function handleInfoClick() {
    toaster.info({
      id: toastId, // Use the pre-generated ID
      message: "Something interesting has happened",
      onClose: () => console.log("closing toast"),
    });
  }
</script>
<script lang="ts" setup>
  const toaster = useToast();
  const toastId = useId(); // Generate ID during component setup
  
  function handleInfoClick() {
    toaster.info({
      id: toastId, // Use the pre-generated ID
      message: "Something interesting has happened",
      onClose: () => console.log("closing toast"),
    });
  }
</script>
Why this happens The useId() composable in Vue 3.4+ (which Nuxt uses) is designed to generate stable IDs that are consistent between server and client during hydration. According to the knowledge sources, there have been several issues and fixes related to useId() in Nuxt: 1. Nuxt has implemented fixes for hydration mismatches with useId() GitHub PR #30343 2. There were issues with useId() when used with useAsyncData GitHub Issue #30289 When you call useId() directly inside a function parameter, it's not being executed during the component's setup phase, which is when composables are meant to be called. Alternative approach If you need to generate unique IDs for multiple toasts from the same component, you could: 1. Use a counter in your component 2. Generate random IDs (though this might not be ideal for SSR) 3. Modify your toast system to auto-generate IDs if none is provided For example, in your useToast composable, you could add ID generation: 
function show(toast: ToastConfig) {
  const toastWithId = {
    ...toast,
    id: toast.id || useId() // Provide a fallback ID if none is given
  };
  queue.value.push(toastWithId);
}
function show(toast: ToastConfig) {
  const toastWithId = {
    ...toast,
    id: toast.id || useId() // Provide a fallback ID if none is given
  };
  queue.value.push(toastWithId);
}
This approach would need to be carefully tested with SSR to ensure hydration works correctly. Remember that composables like useId() should be called at the top level of your setup function, not inside callbacks or event handlers, to ensure proper reactivity and hydration. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4w ago
<@382140070183960576> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?