Nuxt•5mo ago

How to use useState with functions inside

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) }
}

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) }
}

5 Replies

handshake•5mo ago

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

MrDeer•5mo ago

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

handshake•5mo ago

do you mean like this?

MrDeer•5mo ago

Like this for example:

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

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

handshake•5mo ago

is that a nuxt thing?

Gaming

Programming

How to use useState with functions inside