<script lang="ts" setup>

// import

import { VueQueryDevtools } from "@tanstack/vue-query-devtools";

// state

useState('showLoadingOverlay', () => true);

</script>

<template>
    <div>
        <LoadingIndicator />

        <NuxtRouteAnnouncer />

        <NuxtLayout>

            <ToastProvider>
                <NuxtPage />

                <ToastContainer />
                <ToastViewport
                    class="[--viewport-padding:_25px] fixed bottom-0 left-0 flex flex-col p-[var(--viewport-padding)] gap-[10px] w-[390px] max-w-[100vw] m-0 list-none z-[2147483647] outline-none"
                />
            </ToastProvider>
        </NuxtLayout>

        <VueQueryDevtools dir="ltr" buttonPosition="bottom-left" />

    </div>
</template>
