Flux

Root ​

Some Flux features render into a shared root element instead of inline where you use them. <FluxRoot> provides that element and hosts the providers for tooltips, overlays, slide-overs, snackbars and the programmatic alerts, confirms and prompts. Wrap your application in a single <FluxRoot> near its entry point.

WARNING

Without a <FluxRoot> in your app these features silently do nothing: the call succeeds and the component mounts, but nothing is rendered and no error is thrown.

Slots

default
Your application markup.

Providers ​

FluxRoot internally renders the following provider components. These are not used directly, but are required for certain features to work:

  • FluxOverlayProvider renders stacked alerts, confirms and prompts from the global store, and is the mount target that overlays and slide-overs teleport into.
  • FluxSnackbarProvider renders snackbars with transition animations.
  • FluxTooltipProvider renders tooltips with intelligent positioning relative to their trigger element.

TIP

These providers are automatically included when you use FluxRoot. You do not need to import or configure them separately.

Snippet ​

App.vue
vue
<template>
    <FluxRoot>
        <!-- Your application -->
    </FluxRoot>
</template>

<script
    setup
    lang="ts">
    import { FluxRoot } from '@flux-ui/components';
</script>