Nuxt and TypeScript: window.NUXT

Question

I'm building a Nuxt project with TypeScript and need to access window.__NUXT__ because I want to load Algolia on SSR.

beforeMount() {
  const results =
    (this.$nuxt.context && this.$nuxt.context.nuxtState.algoliaState) ||
    window.__NUXT__.algoliaState

  this.instantsearch.hydrate(results)

  // Remove the SSR state so it can't be applied again by mistake
  delete this.$nuxt.context.nuxtState.algoliaState
  delete window.__NUXT__.algoliaState
},

TypeScript is complaining:

Property '__NUXT__' does not exist on type 'Window & typeof globalThis'.

Is there a way to tell TypeScript about __NUXT__?

score 0 · Answer 1 · answered Oct 18 '21 at 15:22

You can augment the global.Window type with the __NUXT__ property:

Create <projectRoot>/global.d.ts with these contents:

// https://stackoverflow.com/a/59499895/6277151
export {}

declare global {
  interface Window {
    __NUXT__: any
  }
}

If using VS Code, restart the IDE to properly index the .d.ts file.

Nuxt and TypeScript: window.__NUXT__

1 Answers1

Nuxt and TypeScript: window.NUXT