Nuxt 3 提供了一个 app.config 配置文件，用于公开应用程序中的反应式配置，并能够在生命周期内的运行时更新它，或使用 nuxt 插件并使用 HMR（热模块替换）对其进行编辑。

    1. export default defineAppConfig({
    2.   title: 'Hello App Config',
    3.   description:
    4.     'This is some content coming from app.config.ts that support HMR, try to update it and see it in action.',
    5.   showButton: false
    6. })
    1. <script setup>
    2. const config = useAppConfig()
    3. </script>
    5. <template>
    6.   <NuxtExampleLayout example="app-config">
    7.     <h1>{{ config.title }}</h1>
    8.     <p>{{ config.description }}</p>
    9.     <button v-if="config.showButton">
    10.       I am a button
    11.     </button>
    12.   </NuxtExampleLayout>
    13. </template>

    image.png