Skip to content

Root

Some functionality of Flux require a root element where other elements can be injected into. This component should be used as the main component of your application.

Alerts, confirms and snackbars are all rendered here for example.

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.
  • 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>