Install Vue

Install the Vue adapter. It brings the shared @floating-ui-plus/web runtime with it, so do not install the Web package as a second direct dependency.

npm

npm i @floating-ui-plus/vue

pnpm

pnpm add @floating-ui-plus/vue

yarn

yarn add @floating-ui-plus/vue

Vue 3.3 or later is required. Your application should already provide Vue as a runtime or peer dependency; the Floating UI Plus adapter is the only Floating UI Plus package you need to add.

First component

<script setup lang="ts">
import {ref} from 'vue';
import {
  FloatingClose,
  FloatingContent,
  FloatingReference,
  FloatingRoot,
  click,
  dismiss,
} from '@floating-ui-plus/vue';

const open = ref(false);
const plugins = [click(), dismiss()];
</script>

<template>
  <FloatingRoot v-model:open="open" :plugins="plugins">
    <FloatingReference>Open settings</FloatingReference>
    <FloatingContent>
      Settings
      <FloatingClose>Close</FloatingClose>
    </FloatingContent>
  </FloatingRoot>
</template>

Use FloatingRoot when descendants should share the provided controller. Use useFloating() when your component already owns its reference and floating element refs.

FloatingContent uses the browser Popover API by default. Use top-layer="none" for an intentionally positioned/custom surface and as="dialog" for a native dialog. Use role() only when the default dialog semantics need to change.

What gets installed

Your package manager resolves @floating-ui-plus/web through the Vue adapter’s dependency graph. You only need a direct @floating-ui-plus/web dependency if you also import framework-neutral controllers in your own application code.

For native Popover and dialog behavior, portals, search, and close guards, see the usage recipes and Vue framework guide.