app.config.js

Nuxt 3 提供了一个 app.config 配置文件，可以在应用程序中公开响应式配置，并在运行时通过生命周期或使用 nuxt 插件进行更新，同时还可以使用 HMR（热模块替换）进行编辑。

你可以使用 app.config.ts 文件轻松提供运行时应用程序配置。它可以是.ts、.js 或.mjs 扩展名之一。

app.config.ts

export default defineAppConfig({
  foo: "bar",
});

用法

要将配置和环境变量公开给应用程序的其他部分，你需要在 app.config 文件中定义配置。

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

访问

当将 theme 添加到 app.config 中时，Nuxt 使用 Vite 或 webpack 来打包代码。我们可以使用 useAppConfig 组合函数在服务器渲染页面和浏览器中普遍访问 theme。

<script setup>
  const appConfig = useAppConfig();

  console.log(appConfig.theme);
</script>