Skip to main content

​
Overview

The App component wraps your entire application to provide global configurations for all Nuxt UI components. It implements Reka UI’s ConfigProvider, ToastProvider, and TooltipProvider to enable consistent behavior across your application.

​
Usage

Wrap your entire application with the App component in your app.vue file:
app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>

​
With locale configuration

Control the locale and reading direction for your application:
app.vue
<template>
  <UApp :locale="{ code: 'en', dir: 'ltr' }">
    <NuxtPage />
  </UApp>
</template>

​
Custom tooltip configuration

Configure global tooltip behavior:
app.vue
<template>
  <UApp :tooltip="{ delayDuration: 200, skipDelayDuration: 300 }">
    <NuxtPage />
  </UApp>
</template>

​
Disable toaster

If you don’t need toast notifications:
app.vue
<template>
  <UApp :toaster="null">
    <NuxtPage />
  </UApp>
</template>

​
Props

​
scrollBody
boolean
Controls whether the body element should scroll when modals or overlays are open.
​
dir
'ltr' | 'rtl'
The global reading direction for all components. Inherited by all child components.
​
tooltip
object
Global configuration for tooltips throughout the application.
​
toaster
object | null
Configuration for toast notifications. Set to null to disable toaster entirely.
​
locale
object
Locale configuration for internationalization and formatting.
​
portal
boolean | string | HTMLElement
default:"'body'"
Target element for portal-rendered content like modals and popovers. Can be a boolean, CSS selector string, or DOM element.

​
Slots

​
default
The main content of your application (typically <NuxtPage /> or your root component).

​
Features

​
Global reading direction

Enables all components to inherit and respect the global reading direction (LTR/RTL), ensuring proper layout and text direction throughout your application.

​
Scroll body control

Prevents layout shifts by managing body scroll behavior when overlays (modals, dialogs, etc.) are open.

​
Unified providers

  • ConfigProvider: Provides global configuration to all Reka UI primitives
  • TooltipProvider: Enables smart tooltip behavior with delay management
  • ToastProvider: Powers the notification system with programmatic toast control
  • OverlayProvider: Manages modals and slideovers

​
Best practices

Always wrap your root component with <UApp> to ensure all Nuxt UI components function correctly with proper global context.
The App component uses Reka UI’s useId() function to generate unique IDs for accessibility, ensuring proper ARIA relationships across your application.
The locale configuration affects date and time formatting in components like Calendar, InputDate, and InputTime. Make sure to set it according to your application’s requirements.

Build docs developers (and LLMs) love

Get started for freeTalk to us