Nuxt•2mo ago

Adding onSelect() to NuxtUI CommandPalette causes error "cannot stringify a function"

It works wihtout the onSelect() but fails with Error 500: Cannot stringify a function as soon as I add it back 😦

3 Replies

Hi @mooz. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The error "cannot stringify a function" occurs because you are likely passing a function (such as onSelect) directly as part of the data to a prop or composable that expects serializable data. In Nuxt (and Vue in general), functions cannot be serialized (stringified), which is required when data is sent from server to client or used in SSR contexts. In the NuxtUI CommandPalette examples, the onSelect function is used within the items of the groups array. This works in purely client-side contexts, but if you try to use this pattern in a context where the data is serialized (e.g., returned from useAsyncData, useFetch, or passed as a prop that is hydrated from SSR), you will encounter this error. Key points from the documentation: - The onSelect field is shown in examples where the groups array is defined directly in the component (not fetched or returned from an async composable). For example:

  const groups = ref([
    {
      id: 'actions',
      items: [
        {
          label: 'Add new file',
          onSelect() {
            toast.add({ title: 'Add new file' })
          }
        }
      ]
    }
  ])

  const groups = ref([
    {
      id: 'actions',
      items: [
        {
          label: 'Add new file',
          onSelect() {
            toast.add({ title: 'Add new file' })
          }
        }
      ]
    }
  ])

This works because the function is never serialized—it's just a local variable in the client-side setup functionCommandPalette: Control selected items. - If you fetch or generate your groups/items data from an API or useAsyncData/useFetch, you must not include functions in the returned data, as these will be serialized and cause the error you described. How to fix: - Only add the onSelect function to your items after fetching or generating the data, and only on the client side. - Do not include functions in data returned from useAsyncData, useFetch, or any server-side code. Example fix:

const { data: users } = await useFetch('api/users') // This should return only serializable data

const groups = computed(() => [
  {
    id: 'users',
    items: (users.value || []).map(user => ({
      ...user,
      onSelect() {
        // Your client-side logic here
      }
    }))
  }
])

const { data: users } = await useFetch('api/users') // This should return only serializable data

const groups = computed(() => [
  {
    id: 'users',
    items: (users.value || []).map(user => ({
      ...user,
      onSelect() {
        // Your client-side logic here
      }
    }))
  }
])

This way, the onSelect function is only attached on the client, after the data is fetched and deserialized. Summary:
You cannot serialize functions in Nuxt data that crosses the server/client boundary. Only attach functions like onSelect in purely client-side code, after any async data fetching or SSR hydration is complete. This is a common pattern in Nuxt and Vue for handling client-only logic in UI componentsCommandPalette: Control selected items. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@552522419307413544> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

moozOP•2mo ago

wow the ai actually got it right

Gaming

Programming

Adding onSelect() to NuxtUI CommandPalette causes error "cannot stringify a function"

Did you find this page helpful?