How to add global interfaces to Nuxt project

user_14233995 0
Viewed 662

I just started with Nuxt 3 and have been having some trouble with using typescript functionality.

I am trying to build a general NavBar that can have multiple buttons with different links. For this I wanted to make an interface that I can pass as an array to the component.

Something like:

interface Button {
  icon: string,
  link: string
}

Is there some way to make interfaces that are visible throughout my whole project? I can't find a lot about typescript integration for Nuxt.

nuxtjs3 nuxt.js typescript
1 Answers

Thanks to Tea_lover_418, I tried what he suggested in the comment and it works even better with global declaration.

At the root of your project create a directory named types with an index.ts file, add your global types declaration like in the example below. That's it, you don't need to import anything it's available globally.

// ~/types/index.ts

export { };

declare global {
  type SomeType = [boolean, string, number]; 

  interface MyFancyInterface {
    ...
  }

  const enum GlobalConstEnum {
    ...
  }

  ....
}
user_125947300
Related