Nuxt Toast not displaying

<template>
    <UApp>
        <NuxtLayout>
            <NuxtPage />
        </NuxtLayout>
    </UApp>
</template>

const toast = useToast();

async function onSubmit(event: FormSubmitEvent<UpdateProfileInput>) {
    try {
        toast.add({
            title: 'Event added to calendar',
            description: `This event is scheduled for.`,
            icon: 'i-lucide-calendar-days',
        });
    } catch (error) {
        console.error('Failed to update user profile:', error);
        return;
    }
}

"dependencies": {
    "@nuxt/ui": "^4.0.1",
    "@nuxtjs/i18n": "^10.1.0",
    "@prisma/client": "^6.18.0",
    "image-size": "^2.0.2",
    "minio": "^8.0.6",
    "nuxt": "^4.1.3",
    "nuxt-auth-utils": "^0.5.25",
    "redis": "^5.8.3",
    "vue": "^3.5.22",
    "vue-router": "^4.5.1",
    "zod": "^4.1.12",
    "zod-form-data": "^3.0.1"
  },