How to use useState with functions inside | Nuxt | Page 1

keen pond Jun 13, 2024, 7:44 PM

#

Hey, I have been trying to create a composable for a header, which contains all details about the header.

The issue I am facing is, that the useState composable cannot hold functions, otherwise I will get a cannot stringify a function during SSR.

What is the recommended workaround to a composable like this?

interface Header {
  title?: string
  back?: boolean
  secondary?: {
    icon: string
    to?: string
    click?: () => void
  }
  transparent?: boolean
}
export default function () {
  const state = useState<Header>('header', () => ({}))
  const setHeader = (header: Header) => {
    state.value = header
  }

  return { setHeader, header: readonly(state) }
}

hoary wyvern Jun 13, 2024, 8:11 PM

#

idk where you're storing the composable but is it structured like this? https://github.com/snolan-ethika/nuxt-stuff/commit/96b0bc24e68c00b9bac4e11402c3b5c19668a348

keen pond Jun 14, 2024, 10:24 PM

#

of course, try setting click to function and render it on ssr. it will fail, because useState cant hold functions in state

hoary wyvern Jun 14, 2024, 11:08 PM

#

do you mean like this?

keen pond Jun 17, 2024, 5:03 PM

#

Like this for example:

setHeader({
  secondary: {
    click: () => navigateTo('/');
  }
})

#How to use useState with functions inside