Flag Group
FlagGroup is the toast container component. Place it once in your app root layout — it teleports to <body> and renders any flags triggered by useFlag.
Setup
Add <FlagGroup /> once at the root of your app:
vue
<!-- App.vue -->
<script setup>
import { FlagGroup } from '@jetpack-labs/jetpack-ui'
</script>
<template>
<RouterView />
<FlagGroup />
</template>Then trigger notifications from any component using useFlag:
ts
import { useFlag } from '@jetpack-labs/jetpack-ui'
const { addFlag } = useFlag()
addFlag({ title: 'Saved', appearance: 'success' })See Flag for the full useFlag API and Flag component props.
Props
FlagGroup has no props. It reads from the shared useFlag store.
Slots
FlagGroup has no slots.