App

封装您的应用以提供全局配置等。

用法

此组件实现了 Reka UI 的 ConfigProvider，为所有组件提供全局配置：

使所有基础组件能够继承全局阅读方向。
允许在设置 body 锁定（body lock）时更改滚动体的行为。
更多控制以防止布局偏移。

它还使用了 ToastProvider 和 TooltipProvider 来提供全局的 toast 消息和工具提示，以及程序化的模态框(modals)和抽屉(slideovers)。

在您的应用的根部使用它：

app.vue

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

了解如何使用 locale 属性更改应用的区域设置。

示例

这个 App.vue 组件，结合其内部的 ConfigProvider、TooltipProvider、UToaster 和 UOverlayProvider，看起来是 Nuxt UI（或一个类似组件库）的根级别配置提供者。它负责设置整个应用（或应用的一部分）的全局行为和默认值，例如语言环境、工具提示行为、通知系统以及 Portal 渲染目标。

在 Nuxt UI 项目中，App.vue 通常是框架级别的、无需直接在你的页面或组件中显式导入和使用的。它在 Nuxt 应用程序的入口点(根组件 app.vue)/布局被加载。

你可以将它放到 layouts/default.vue 或 app.vue 中：

<!-- layouts/default.vue -->
<template>
  <UApp :tooltip="{ delay: 200 }" :toaster="null" :locale="locale">
    <template #default>
      <NuxtPage />
    </template>
  </UApp>
</template>

<script setup lang="ts">
import type { Locale } from '~/types'

const locale: Locale = {
  code: 'zh-CN',
  dir: 'ltr',
  messages: {
    welcome: '欢迎使用 Nuxt'
  }
}
</script>

Nuxt UI 模块配置 (在 nuxt.config.ts 中)

这是你间接配置 App.vue 内部 ConfigProvider, TooltipProvider, Toaster 等行为的地方。

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/content', // 确保你的 Nuxt UI 模块已安装并配置
  ],

  // Nuxt UI 的全局配置，这些配置会影响 App.vue 内部的提供者
  ui: {
    global: true, // 启用全局配置（如果模块支持）
    icons: {
      // 全局图标配置，App.vue 内部的 UIcon 会使用这些
      dynamic: true,
      collections: ['heroicons'],
    },
    // 你可以在这里配置默认的颜色、尺寸、变体等
    // 这些配置会通过某种机制（如自动生成 app.config.ts）传递给 ConfigProvider
  },

  // 如果 App.vue 中的某些 prop 需要通过 app.config.ts 配置
  app: {
    // 假设你有全局的 Tooltip 配置，你可以在这里定义
    head: {
      // ...
    }
  }
})

app.config.ts (更精细的全局配置)

对于一些更精细的、需要在客户端可配置的全局 UI 行为，通常会通过 app.config.ts 来完成，Nuxt UI 会自动读取这些配置并应用到其内部组件（包括可能影响到 App.vue 提供的上下文）。

// app.config.ts
export default defineAppConfig({
  ui: {
    // 这部分配置会影响到 ConfigProvider 和其内部的 TooltipProvider、Toaster
    tooltip: {
      delay: {
        show: 500, // 默认 Tooltip 显示延迟
        hide: 100 // 默认 Tooltip 隐藏延迟
      }
    },
    // 你可以全局禁用 Toaster，或者配置其默认属性
    toaster: {
      // position: 'bottom-right',
      // limit: 3
    },
    // 如果 App.vue 的 `portal` 属性需要配置
    portal: 'body', // 或者一个特定的选择器 '#my-custom-portal-target'
    // ...其他 UI 默认值
  }
})

在你的页面或组件中 (正常使用 Nuxt UI 组件)

当你使用 Nuxt UI 提供的组件时，它们会自动受益于 app.vue 提供的全局上下文和配置。

<template>
  <div>
    <h1>欢迎来到我的 Nuxt 应用</h1>
    <UButton label="这是一个按钮" @click="showToast" />
    <UButton label="Hover Me" v-tooltip="'这是一个工具提示'" />
  </div>
</template>

<script setup>
import { useToast } from '#app/composables/toast' // Nuxt UI 提供的 useToast composable

const toast = useToast()

const showToast = () => {
  toast.add({ title: 'Hello', description: '这是一个通知！' })
}
</script>

在上面的例子中：

UButton 会使用 Nuxt UI 模块中配置的默认样式。
v-tooltip 指令会利用 App.vue 中 TooltipProvider 提供的全局配置（例如，延迟时间）。
useToast() composable 会找到 App.vue 中渲染的 UToaster 实例，并向其发送通知。框架通过共享状态键名 'toasts' 隐式绑定。

API

Props

Prop	Default	Type
`tooltip`		`TooltipProviderProps`
`toaster`		`null \| ToasterProps`
`locale`		`Locale<Messages>`
`portal`	`'body'`	`string \| 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`	`{}`

useToast

一个用于在您的应用中显示 toast 通知消息的可组合项。

Accordion

一组可折叠面板的堆叠。