NuxtN
Nuxt•11mo ago•
6 replies
Norbiros

How to use lazy components in composables?

Hi! In new nuxt version they properly added delayed hydration, which is awesome, but I have composable like this (abstraction over nuxt ui component)
import { LazyPanelModalConfirmDelete } from '#components'

export function useConfirmModal(modalData: any) {
  const overlay = useOverlay()
  const isOpen = ref(false)

  const modal = overlay.create(LazyPanelModalConfirmDelete, { props: modalData })

  async function open() {
    isOpen.value = true
    await modal.open()
  }

  function close() {
    isOpen.value = true
    modal.close()
  }

  return { open, close }
}


Problem is that if modal is not opened I think component is hydrated, even if not the js for it is loaded, which is not desired behaviour. Any idea how I can do it? I found some examples with import() but I am not sure if it will help
Was this page helpful?