Nuxt•7mo ago

Updating a rendered list of components

Hello, here is the stack used (with TypeScript): - "@nuxt/devtools": "^1.1.5", - "@nuxtjs/supabase": "^1.2.0", - "@nuxtjs/tailwindcss": "^6.11.4", - "@types/node": "^20.12.7", - "nuxt": "^3.11.2", - "nuxt-icon": "^0.6.10", - "vuetify-nuxt-module": "^0.13.2" And here is my issue: I am updating a list of rendered components but I get this console warning message:

[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

In the script setup, I declare the empty tasks list and define the functions (fetchTasks and addTask). In the onMounted hook, I call the fetchTasks. The web page has a button to add a new Task and after the new task is submitted to Supabase, it is added in the tasks list using unshift. Then, I get the console warning message above. I also see the same warning message when I modify the code and the hmr is triggered by vite or even sometimes when I refresh the browser. It seems that there is a timing issue between rendering and server/client code being executed. The list of components is nothing fancy:

<div v-if="tasks.length > 0">
  <transition-group
    name="task-list"
    tag="ul"
    class="dynamic-list"
  >
    <TaskCard
      v-for="task in tasks"
      :key="task.id"
      class="task-card"
      :task="task"
      role="li"
      @task-deleted="handleDeletedTask"
    />
  </transition-group>
</div>

<div v-if="tasks.length > 0">
  <transition-group
    name="task-list"
    tag="ul"
    class="dynamic-list"
  >
    <TaskCard
      v-for="task in tasks"
      :key="task.id"
      class="task-card"
      :task="task"
      role="li"
      @task-deleted="handleDeletedTask"
    />
  </transition-group>
</div>

Here is what I tried (unsuccessfully): - defining this specific page as { ssr: false } in the nuxt router config, - adding a <ClientOnly> tag in the template around the form using the functions, - moving the tasks declaration and functions in the onMounted hook but TypeScript complains because the functions refered in the template are then not declared. Does anybody have a suggestion to get rid of this warning message? Thanks!

1 Reply

LazyDali•7mo ago

🤯 Wow, after hours of investigating on this obscur warning message, it was finally the v-text-field (Vuetify) in the TaskCard component that had a validation rule and the warning stopped showing once I added the property validate-on="lazy input". I believe the function in the rules was launched before the component was fully mounted after being created and unshifted in the list. I still feel this a bit strange but I hope this can help someone else with a similar issue. The worst thing is that I see several people had this warning message over time but it always seem to be due to something different.

Gaming

Programming

Updating a rendered list of components