App

GitHub
Wraps your app to provide global configurations and more.

Usage

This component implements Reka UI ConfigProvider to provide global configuration to all components:

  • Enables all primitives to inherit global reading direction.
  • Enables changing the behavior of scroll body when setting body lock.
  • Much more controls to prevent layout shifts.

It's also using ToastProvider and TooltipProvider to provide global toasts and tooltips, as well as programmatic modals and slideovers.

Wrap your entire application with the App component in your app.vue file:

app.vue
<template>
  <UApp>
    <NuxtPage />
  </UApp>
</template>
Learn how to use the locale prop to change the locale of your app.
Learn how to use the locale prop to change the locale of your app.

API

Props

Prop Default Type
tooltip

TooltipProviderProps

toaster

null | ToasterProps

locale

Locale<Messages>

portal

'body'

string | false | true | HTMLElement

scrollBody

boolean | ScrollBodyOption

The global scroll body behavior of your application. This will be inherited by the related primitives.

nonce

string

The global nonce value of your application. This will be inherited by the related primitives.

Slots

Slot Type
default

{}

Changelog

7659f — fix: allow global portal disabling (#5111)

5cb65 — feat: import @nuxt/ui-pro components

29fa4 — feat: add global portal prop (#3688)

b9983 — fix: improve generic types (#3331)

Container

A container lets you center and constrain the width of your content.