N
Nuxt•3d ago
captivator

how to give types to a $plugin under nuxtApp?

i made app/plugins/app.ts which has some methods defined: 
export type AppPlugin = {
    error(v: { code: string; error: any }): void
}

export default defineNuxtPlugin((nuxtApp) => {
    const appObject = {
        error(v) {
            // todo: make better error handling
            console.error(`[APP|ERROR] error at ${v.code}: ${v.error}`)
        },
    } as AppPlugin

    nuxtApp.provide('app', appObject)
})
export type AppPlugin = {
    error(v: { code: string; error: any }): void
}

export default defineNuxtPlugin((nuxtApp) => {
    const appObject = {
        error(v) {
            // todo: make better error handling
            console.error(`[APP|ERROR] error at ${v.code}: ${v.error}`)
        },
    } as AppPlugin

    nuxtApp.provide('app', appObject)
})
where can i define nuxtApp types, so that i can later use nuxtApp.$app anywhere without it being unknown? something like 
import type { AppPlugin } from '../plugins/app'
import type { ApolloClient } from '@apollo/client/core'

declare module '#app' {
    interface NuxtApp {
        $app: AppPlugin
        $apollo: ApolloClient
    }
}
import type { AppPlugin } from '../plugins/app'
import type { ApolloClient } from '@apollo/client/core'

declare module '#app' {
    interface NuxtApp {
        $app: AppPlugin
        $apollo: ApolloClient
    }
}
5 Replies
kapa.ai
kapa.ai•3d ago
Hi @captivator. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You’re on the right track with augmenting NuxtApp – that’s exactly how Nuxt expects you to type custom injections on nuxtApp. The missing piece is where you put that declaration so TypeScript picks it up automatically. From the Nuxt type‑augmentation patterns in the sources (custom types picked up globally, declare module '#app' { interface NuxtApp { … } }, etc.), the correct approach is: 1. Create a .d.ts file in your project (e.g. types/app.d.ts). 2. Augment #app there, and export nothing else (so TS treats it as a module). For example: 
// types/app.d.ts
import type { AppPlugin } from '~/app/plugins/app'
import type { ApolloClient } from '@apollo/client/core'

declare module '#app' {
  interface NuxtApp {
    $app: AppPlugin
    $apollo: ApolloClient
  }
}

export {}
// types/app.d.ts
import type { AppPlugin } from '~/app/plugins/app'
import type { ApolloClient } from '@apollo/client/core'

declare module '#app' {
  interface NuxtApp {
    $app: AppPlugin
    $apollo: ApolloClient
  }
}

export {}
3. Ensure Nuxt/TS sees the file. Nuxt already includes project .d.ts files in its generated tsconfig, so you typically do not need to touch tsconfig.json (similar to how custom .d.ts under types/ are auto‑included). [Type definitions] After that, useNuxtApp().$app and nuxtApp.$app should be correctly typed instead of unknown wherever you use them. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@739834419598065694> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
captivator
captivatorOP•3d ago
dang i already had a nuxt.d.ts file but i just had to rename it to app.d.ts @kapa.ai do i put the types inside the app folder, or outside?
kapa.ai
kapa.ai•3d ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- For Nuxt 4’s folder/layout and type system, plugin type augmentations should live outside app/, in a dedicated types location that Nuxt’s TS configs pick up (for example a top‑level types/ folder or shared/ in Nuxt 4). Nuxt’s tooling already includes .d.ts files from such top‑level/type‑oriented locations into the appropriate TS contexts without extra tsconfig work, and this is the pattern used for global/custom types. [SO type defs; TS augmentation docs] So for your NuxtApp augmentation: - put it in something like types/app.d.ts (or in shared/ if you’re on the v4 layout and want it shared between app/server) rather than under app/, - and keep your plugin itself in app/plugins/app.ts. That way nuxtApp.$app is typed everywhere without mixing runtime app code and type‑only files. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3d ago
<@739834419598065694> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?