useOverlay props type lost

[eevho]

Environment

---

• Operating System: Linux
• Node Version: v20.9.0
• Nuxt Version: 3.15.4
• CLI Version: 3.22.3
• Nitro Version: 2.10.4
• Package Manager: [email protected]
• Builder: -
• User Config: devtools, vite, modules, css, compatibilityDate
• Runtime Modules: @nuxt/[email protected]
• Build Modules: -

---

Is this bug related to Nuxt or Vue?

Nuxt

Version

3.15.4

Reproduction

https://codesandbox.io/p/devbox/pmvsfw

Description

declare function _useOverlay(): {
    overlays: import("vue").ShallowReactive<Overlay[]>;
    open: <T extends Component>(id: symbol, props?: ComponentProps<T>) => Promise<any>;
    close: (id: symbol, value?: any) => void;
    create: <T extends Component>(component: T, _options?: OverlayOptions<ComponentProps<T>>) => OverlayInstance<T>;
    patch: <T extends Component>(id: symbol, props: Partial<ComponentProps<T>>) => void;
    unMount: (id: symbol) => void;
};

e.g:

const overlay = useOverlay()
overlay.create(UModal, { props: {untyped} })

I didn't get the correct props type when using useOverlay, and there are no property hints when passing overlay.open or the open function after create

Additional context

No response

Logs

[genu]

I think the issue is that you're passing UModal to the overlay. What you have to do is actually create a component and pass it to the overlay, like so:

import { Confirm } from "#components";

export const useConfirm = () => {
  const overlay = useOverlay();
  const m = overlay.create(Confirm, {
    props: {
      title:'test'
    }
  });
  // The visible type hint is any
  m.open({
    
  });
};

Have a look at this: https://codesandbox.io/p/devbox/nuxtui-useoverlay-forked-8gh75m

and the docs: https://ui3.nuxt.dev/components/modal#programmatic-usage

[eevho]

I mean props didn't get the correct type, it's now any, and the same goes for passing the components it created

[genu]

Hmm, it's odd. I'll take a look.

Could you try it directly in vscode instead of codesandbox in the meantime?

[eevho]

I found this problem in the local vscode, because codesandbox is convenient to view the ts prompt, so use it to reproduce.

[genu]

What was the problem?

[eevho]

I mean the missing props type was first discovered in my local vscode environment

[genu]

Is it safe to say this can be closed? cc @benjamincanac

[benjamincanac]

@genu Fixed by #3716 right?

[genu]

@genu Fixed by #3716 right?

This is unrelated to that PR.

This was probably related to codesandbox environment. There haven't been any other reports beyond this -- probably a very isolated issue.