Nuxt.js 3 - useAppConfig() returning unknown

Question

In a NuxtJs 3 project I tried to add some specific stuff into my app.config.ts a the root directory of my project.

When I tried to call useAppConfig() to use my config data, VSCode raise an error appConfig.as is unknown type

I'm stuck with that :(

The 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,
})

Below after calling useAppConfig(), I have appConfig.as is unknown type

<script lang="ts" setup>

  const appConfig = useAppConfig()

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

Answer 1

I haven't tried using the useAppConfig() composable. But, based on the documentation, it says,

Nuxt tries to automatically generate a TypeScript interface from provided app config so you won't have to type it yourself.

However, there are some cases where you might want to type it yourself. There are two possible things you might want to type.

~/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 { }

Note: Once you added that file, you might want to reload your IDE.

~/app.config.ts

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

Now, it should show the available typings for you.

Again, I haven't used the useAppConfig composable. My answer is just based on the Nuxt documentation.