floating-ui-vue-skilld

Category: Development & Coding | Uploader: harlan-zw | Downloads: 0 | Version: v1.0（Latest）

Floating UI for Vue. ALWAYS use when writing code importing \"@floating-ui/vue\". Consult for debugging, best practices, or modifying @floating-ui/vue, floating-ui/vue, floating-ui vue, floating ui vue, floating-ui, floating ui.

Changelog: Source: GitHub https://github.com/harlan-zw/vue-ecosystem-skills

Directory Structure

Current level: tree/main/skills/floating-ui-vue-skilld/

📁 references/
- 📁 discussions/
  - 📄 _INDEX.md 2.3 KB
  - 📄 discussion-3170.md 824 B
  - 📄 discussion-3176.md 833 B
  - 📄 discussion-3208.md 645 B
  - 📄 discussion-3216.md 1.3 KB
  - 📄 discussion-3234.md 1.8 KB
  - 📄 discussion-3242.md 1.2 KB
  - 📄 discussion-3243.md 1.5 KB
  - 📄 discussion-3249.md 1.2 KB
  - 📄 discussion-3251.md 1.1 KB
  - 📄 discussion-3262.md 1.8 KB
  - 📄 discussion-3304.md 839 B
  - 📄 discussion-3307.md 1.6 KB
  - 📄 discussion-3364.md 1.1 KB
  - 📄 discussion-3369.md 1.5 KB
  - 📄 discussion-3379.md 1.1 KB
  - 📄 discussion-3382.md 595 B
  - 📄 discussion-3383.md 1.4 KB
  - 📄 discussion-3393.md 1.1 KB
  - 📄 discussion-3405.md 1007 B
  - 📄 discussion-3411.md 715 B
- 📁 docs/
  - 📁 docs/
    
    📄 vue.md 7.7 KB
  - 📄 arrow.mdx 9.2 KB
  - 📄 autoPlacement.mdx 5.3 KB
  - 📄 autoUpdate.mdx 9.4 KB
  - 📄 Composite.mdx 3.8 KB
  - 📄 computePosition.mdx 10.4 KB
  - 📄 custom-hooks.mdx 2.0 KB
  - 📄 detectOverflow.mdx 4.6 KB
  - 📄 dialog.mdx 7.5 KB
  - 📄 flip.mdx 12.5 KB
  - 📄 FloatingArrow.mdx 6.7 KB
  - 📄 FloatingDelayGroup.mdx 3.4 KB
  - 📄 FloatingFocusManager.mdx 9.0 KB
  - 📄 FloatingList.mdx 2.6 KB
  - 📄 FloatingOverlay.mdx 1.5 KB
  - 📄 FloatingPortal.mdx 2.4 KB
  - 📄 FloatingTree.mdx 3.7 KB
  - 📄 getting-started.mdx 3.3 KB
  - 📄 hide.mdx 4.5 KB
  - 📄 inline.mdx 3.3 KB
  - 📄 inner.mdx 5.3 KB
  - 📄 middleware.mdx 8.5 KB
  - 📄 migration.mdx 6.8 KB
  - 📄 misc.mdx 4.9 KB
  - 📄 motivation.mdx 3.1 KB
  - 📄 offset.mdx 12.0 KB
  - 📄 platform.mdx 6.6 KB
  - 📄 popover.mdx 8.1 KB
  - 📄 react-examples.mdx 1.3 KB
  - 📄 react-native.mdx 4.9 KB
  - 📄 react-utils.mdx 689 B
  - 📄 react.mdx 9.8 KB
  - 📄 shift.mdx 6.1 KB
  - 📄 size.mdx 7.8 KB
  - 📄 tooltip.mdx 8.1 KB
  - 📄 tutorial.mdx 13.7 KB
  - 📄 useClick.mdx 2.7 KB
  - 📄 useClientPoint.mdx 2.6 KB
  - 📄 useDismiss.mdx 6.6 KB
  - 📄 useFloating.mdx 14.9 KB
  - 📄 useFocus.mdx 1.8 KB
  - 📄 useHover.mdx 7.4 KB
  - 📄 useInteractions.mdx 5.0 KB
  - 📄 useListNavigation.mdx 10.8 KB
  - 📄 useRole.mdx 5.3 KB
  - 📄 useTransition.mdx 9.5 KB
  - 📄 useTypeahead.mdx 5.2 KB
  - 📄 virtual-elements.mdx 4.1 KB
  - 📄 vue.mdx 7.7 KB
- 📁 issues/
  - 📄 _INDEX.md 3.6 KB
  - 📄 issue-1361.md 2.0 KB
  - 📄 issue-1697.md 1.7 KB
  - 📄 issue-1842.md 1.4 KB
  - 📄 issue-218.md 1.3 KB
  - 📄 issue-2904.md 1.1 KB
  - 📄 issue-2934.md 901 B
  - 📄 issue-2955.md 2.5 KB
  - 📄 issue-2988.md 1.1 KB
  - 📄 issue-300.md 3.0 KB
  - 📄 issue-3002.md 1.2 KB
  - 📄 issue-3032.md 1.8 KB
  - 📄 issue-3067.md 3.4 KB
  - 📄 issue-3108.md 1.0 KB
  - 📄 issue-3138.md 535 B
  - 📄 issue-3150.md 684 B
  - 📄 issue-3206.md 676 B
  - 📄 issue-3227.md 945 B
  - 📄 issue-3260.md 1.6 KB
  - 📄 issue-3269.md 1.0 KB
  - 📄 issue-3314.md 569 B
  - 📄 issue-3329.md 859 B
  - 📄 issue-3394.md 1.0 KB
  - 📄 issue-3407.md 1.1 KB
  - 📄 issue-3412.md 1003 B
  - 📄 issue-411.md 1.2 KB
  - 📄 issue-478.md 2.2 KB
  - 📄 issue-617.md 2.6 KB
  - 📄 issue-674.md 1.7 KB
  - 📄 issue-690.md 1.1 KB
  - 📄 issue-695.md 1.3 KB
- 📁 releases/
  - 📁 @floating-ui/
    
    📄 [email protected] 182 B
    
    📄 [email protected] 170 B
    
    📄 [email protected] 531 B
    
    📄 [email protected] 161 B
    
    📄 [email protected] 337 B
    
    📄 [email protected] 361 B
    
    📄 [email protected] 187 B
    
    📄 [email protected] 169 B
    
    📄 [email protected] 169 B
    
    📄 [email protected] 171 B
    
    📄 [email protected] 253 B
    
    📄 [email protected] 195 B
    
    📄 [email protected] 171 B
    
    📄 [email protected] 171 B
    
    📄 [email protected] 171 B
    
    📄 [email protected] 251 B
    
    📄 [email protected] 171 B
    
    📄 [email protected] 198 B
    
    📄 [email protected] 169 B
    
    📄 [email protected] 169 B
  - 📄 _INDEX.md 2.0 KB
  - 📄 CHANGELOG.md 1.7 KB
📄 SKILL.md 5.3 KB

SKILL.md

---
name: floating-ui-vue-skilld
description: "Floating UI for Vue. ALWAYS use when writing code importing \"@floating-ui/vue\". Consult for debugging, best practices, or modifying @floating-ui/vue, floating-ui/vue, floating-ui vue, floating ui vue, floating-ui, floating ui."
metadata:
  version: 1.1.11
  generated_at: 2026-03-21
  references_synced_at: 2026-03-21
---

# floating-ui/floating-ui `@floating-ui/vue`

> Floating UI for Vue

**Version:** 1.1.11
**Deps:** vue-demi@>=0.13.0, @floating-ui/dom@^1.7.6, @floating-ui/utils@^0.2.11
**Tags:** latest: 1.1.11

**References:** [Docs](./references/docs/_INDEX.md) — API reference, guides • [GitHub Issues](./references/issues/_INDEX.md) — bugs, workarounds, edge cases • [GitHub Discussions](./references/discussions/_INDEX.md) — Q&A, patterns, recipes • [Releases](./references/releases/_INDEX.md) — changelog, breaking changes, new APIs
## API Changes

This section documents version-specific API changes for `@floating-ui/vue` — prioritize the v1.0.0 major release and subsequent minor updates.

- BREAKING: `x` and `y` coordinates now default to `0` instead of `null` since v1.0.0. Use `isPositioned` to check if layout is ready [source](./references/releases/@floating-ui/vue@1.0.0.md)

- NEW: `floatingStyles` — Returns a pre-configured `style` object for the floating element (position, top, left, transform) since v1.0.0 [source](./references/releases/@floating-ui/vue@1.0.0.md)

- NEW: `MaybeReadonlyRefOrGetter` — `useFloating` options now support getters (e.g., `() => props.placement`) and refs since v1.1.0 [source](./references/releases/@floating-ui/vue@1.1.0.md)

- NEW: `isPositioned` — Boolean ref returned by `useFloating` that indicates if the floating element has been positioned since v0.2.0 [source](./references/releases/@floating-ui/vue@0.2.0.md)

- NEW: `open` option — Optional boolean ref in `useFloating` to synchronize `isPositioned` with the element's open state since v0.2.0 [source](./references/releases/@floating-ui/vue@0.2.0.md)

- IMPROVED: `ArrowOptions.element` — Widened type to `MaybeElement<Element>` to improve compatibility with Vue Template Refs since v1.0.2 [source](./references/releases/@floating-ui/vue@1.0.2.md)

- NEW: `whileElementsMounted` — Preferred option for `useFloating` to handle the `autoUpdate` lifecycle automatically since v1.0.0 [source](./references/docs/vue.mdx)

- NEW: `update()` — Function returned by `useFloating` to manually trigger a position recalculation since v0.2.0 [source](./references/docs/vue.mdx)

- NEW: Template Ref support for `arrow()` — The `element` option in `arrow` middleware now natively accepts Vue refs since v0.x/v1.0.0 [source](./references/docs/arrow.mdx)

**Also changed:** `exports .d.mts types` v1.0.3 · `isPositioned` false when `open` false fix v1.1.5 · `MaybeReadonlyRefOrGetter` legacy Vue support v1.1.1

## Best Practices

- Use `whileElementsMounted: autoUpdate` to ensure the floating element stays anchored during scroll, resize, or layout changes. This handles the full lifecycle of positioning listeners automatically [source](./references/docs/vue.mdx)

- Always return the cleanup function when passing a custom function to `whileElementsMounted` (e.g., when providing custom options to `autoUpdate`) [source](./references/docs/vue.mdx)
```ts
useFloating(reference, floating, {
  whileElementsMounted(reference, floating, update) {
    return autoUpdate(reference, floating, update, {animationFrame: true});
  },
});
```

- Prefer `v-if` for floating elements when using `whileElementsMounted`. If using `v-show`, avoid the `whileElementsMounted` prop and manage the `autoUpdate` lifecycle manually via watchers to prevent performance leaks when the element is hidden [source](./references/docs/autoUpdate.mdx)

- Use the `isPositioned` ref to coordinate side effects that require the final position, such as focusing an input or scrolling an element into view [source](./references/docs/vue.mdx)
```ts
const {isPositioned} = useFloating(reference, floating, {open});

watch(isPositioned, (positioned) => {
  if (positioned) {
    inputRef.value?.focus();
  }
});
```

- Pass getter functions or `Ref`s to `useFloating` options (like `placement` or `middleware`) to enable reactivity. Since v1.1.0, these options support `MaybeReadonlyRefOrGetter` [source](./references/releases/@floating-ui/vue@1.1.0.md)

- Utilize a wrapper element to support CSS transform animations while maintaining the performant `transform: true` positioning (default). The outer element handles positioning, while the inner element handles the animation [source](./references/docs/vue.mdx)

- Synchronize positioning state by passing an `open` ref to `useFloating`. This ensures `isPositioned` is reset and correctly updated across multiple open/close cycles, especially if the reference element moves [source](./references/docs/vue.mdx)

- Pass template refs directly from `ref(null)` to `useFloating` and middleware like `arrow()`. The library automatically unwraps these and waits for the elements to mount before computing coordinates [source](./references/docs/vue.mdx)

- Enable `animationFrame: true` in `autoUpdate` options if the reference element is moved via CSS transforms or other non-layout-triggering animations to maintain perfect anchoring [source](./references/docs/autoUpdate.mdx)

Comments 0

Latest | Hot

Please login before commenting.

Loading comments...

floating-ui-vue-skilld

Directory Structure

SKILL.md

Report

Notice