Placement expects wrong type in Vue 3

[filipbekic01]

Defining Vue component and passing Placement as one of props, gives a wrong type warning.

...
defineProps<{
    placement: Placement;
}>()
...
<Test :placement="bottom-start" />

It is wierd that it expects object because obviously Placement is supposed to be a string, here is image of type:

Using all latests versions Vue, FloatingUI as of today.

[atomiks]

The useFloating composable can accept a string for placement: https://codesandbox.io/p/devbox/l8jvtq.
This seems like a userland issue with the component, what's the library's issue here?

[filipbekic01]

Yes, placement is supposed to be one of given strings.

My example above used to work a few weeks ago, no warnings at all. However, after specific version update of Vue, ESLint, floating-ui or whatever package we updated, this warning started appearing. I'm not 100% sure it's floating-ui problem.

Using AlignedPlacement for instance, gives no warnings but lacks some strings. Seems like this Prettify is not working as expect but I can't figure out who is throwing that warning.

Since npm run lint gives no warnings and the warning appears only in Vun runtime, maybe I should seek help on Vue gh.

[tobiasdalhof]

I have the same issue:

import type { Placement } from '@floating-ui/vue'

const props = withDefaults(defineProps<{
  show: boolean
  placement?: Placement
}>(), {
  placement: 'bottom',
})

[Vue warn]: Invalid prop: type check failed for prop "placement". Expected Object, got String with value "bottom". 

[miroljub1995]

@atomiks Same issue here.

This Prettify is suspicious:

I'm not sure how typescript says for Placement that is union of string literals when Prettify returns an object type

Is Prettify<> necessary here, why Placement is not just Placement = Side | AlignedPlacement, since they are string literals, not objects?

[miroljub1995]

I think this is added by mistake in this commit

I'll create PR for removing it on Placement

[atomiks]

Isn't this a Vue bug? This was added 1.5 years ago and is now suddenly erroring for Vue-only consumers which suggests it's a Vue issue in a new version published in the past couple of weeks.

The Prettify util was added intentionally so that the type will show the expanded version of all strings rather than Side | AlignedPlacement which is not clear. https://gist.github.com/palashmon/db68706d4f26d2dbf187e76409905399

[miroljub1995]

I get that Vue is not aligned with TS completely for this case, but I also believe that this is hacky, confusing and I'm skeptical that this is not designed by TS, might just accidentally work for literals.

Anyway, I'll create the issue on Vue.

[atomiks]

Seems like & {} might not be needed in some cases, and could also be & unknown. This doesn't seem to cause the warning (Vue should probably still handle valid TS though, even if it's hackish)

https://x.com/mhdcode/status/1923052799060738401

[atomiks]

vuejs/core#13452

[kleinfreund]

Just wanted to add here that I'm seeing this issue re-surface as of vue 3.5.19. The warning message changed slightly so in the hopes that others might find it eventually through it being indexed in search engines, here's what it says now:

[Vue warn]: Invalid prop: type check failed for prop "floatingUiPlacement". Expected Object, got String with value "bottom-start". 

It looks like a fix for this might be in the works with https://github.com/vuejs/core/pull/13848/files.