Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-02-20 07:30:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: clarify augmenting input/output app config (#8953)

Browse Source 
Co-authored-by: Daniel Roe <daniel@roe.dev>
This commit is contained in:
Mehdi HosseinZade 2023-02-04 17:59:33 +03:30 committed by GitHub
parent 217e59ad96
commit dfd5f3d72b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 31 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
docs/2.guide/2.directory-structure/3.app-config.md
View File

@ -43,13 +43,15 @@ const appConfig = useAppConfig()
console.log(appConfig.theme)
```
<!-- TODO: Document module author for extension -->
### Manually Typing App Config
Nuxt tries to automatically generate a typescript interface from provided app config.
Nuxt tries to automatically generate a TypeScript interface from provided app config.
It is also possible to type app config manually:
It is also possible to type app config manually. There are two possible things you might want to type.
#### Typing App Config Input
`AppConfigInput` might be used by module authors who are declaring what valid _input_ options are when setting app config. This will not affect the type of `useAppConfig()`.
```ts [index.d.ts]
declare module '@nuxt/schema' {
@ -65,3 +67,28 @@ declare module '@nuxt/schema' {
// It is always important to ensure you import/export something when augmenting a type
export {}
```
#### Typing App Config Output
If you want to type the result of calling `useAppConfig()`, then you will want to extend `AppConfig`.
::alert{type=warning}
Be careful when typing `AppConfig` as you will overwrite the types Nuxt infers from your actually defined app config.
::
```ts [index.d.ts]
declare module '@nuxt/schema' {
interface AppConfig {
// This will entirely replace the existing inferred `theme` property
theme: {
// You might want to type this value to add more specific types than Nuxt can infer,
// such as string literal types
primaryColor?: 'red' | 'blue'
}
}
}
// It is always important to ensure you import/export something when augmenting a type
export {}
```