Nuxt.js 3 - useAppConfig() 返回未知

Question

在 NuxtJs 3 项目中，我尝试将一些特定的内容添加到我的项目根目录中的 app.config.ts 中。

当我尝试调用

useAppConfig()

使用我的配置数据时，VSCode 引发错误

appConfig.as is unknown type

我坚持这一点:(

app.config.ts

：

interface asAppConfig {
  layout: {
    nav: {
      isOpen: boolean
    }
  }
}

export default defineAppConfig({
  ui: {
    notifications: {
      position: 'top-0 right-0 bottom-auto',
    },
  },

  as: {
    layout: {
      nav: {
        isOpen: false,
      },
    },
  } satisfies asAppConfig,
})

拨打

useAppConfig()

后，我有

appConfig.nav is unknown type

<script lang="ts" setup>

  const appConfig = useAppConfig()

  const isOpen = computed({
    get: () => appConfig.nav.isOpen,
    set: (value: boolean) => (appConfig.nav.isOpen = value)
  })

Answer 1

我还没有尝试过使用

useAppConfig()

可组合项。但是，根据文档，它说，

Nuxt 尝试自动生成 TypeScript 接口 提供了应用程序配置，因此您无需自己输入。

但是，在某些情况下您可能需要键入它 你自己。您可能需要输入两种可能的内容。

~/index.d.ts

declare module 'nuxt/schema' {
  interface AppConfigInput {
    ui: {
      notifications: {
        position: string; // Assuming position can be any string
      };
    };
    as: {
      layout: {
        nav: {
          isOpen: boolean;
        };
      };
    };
  }
}

// It is always important to ensure you import/export something when augmenting a type
export { }

注意： 添加该文件后，您可能需要重新加载 IDE。

~/app.config.ts

export default defineAppConfig({
  ui: {
    notifications: {
      position: 'top-0 right-0 bottom-auto',
    },
  },
  as: {
    layout: {
      nav: {
        isOpen: false,
      },
    },
  }
})

现在，它应该为您显示可用的类型。

再次强调，我没有使用过

useAppConfig

可组合项。我的答案只是基于 Nuxt 文档。