#types.d.ts

20 messages · Page 1 of 1 (latest)

long vector
#

How can I include types in nuxt3 proyect?

granite elk
#

Create a folder called types

#

add whatever interfaces you like

#

like User.d.ts

declare interface User {
  email: string
  id: string
  username: string
}
#

Nuxt 3 will automatically make them available to your entire project - for all components/pages/composables/stores/etc.

long vector
#

The problem was to name the file components.d.ts, I changed it to components.ts

granite elk
#

what does that file (components.ts) look like?

#

it has to use that syntax of declare interface if you want to use .d.ts file naming

long vector
#

I am actually trying to use enum

#

so I tried declare enum ,,, and export enum ...

covert heath
#

Is there a need to declare or export tbh?
I mean this just works and gets available all over the project:

// types/filename.ts
interface Hamster {
  fluffiness: number;
}
#

But i'm a typescript noob so I might be missing something

storm fjord
#

I'm wondering, why is the "types" folder not mentioned in the Nuxt Guide? Is it a Nuxt built-in directory or a Node one?

covert heath
#

In theory, it doesn't have to be types even

#

If you look at .nuxt/tsconfig.json, you'll find:

  "include": [
    "./nuxt.d.ts",
    "../**/*"
  ],
granite elk
#

yeah, doesn't have to be "types" - just a convention

#

some people put their interfaces/types right next to related components, or just in a single types.ts file

slow stirrup
#

Thanks for posting this request for guidance on types / interfaces. I tried to follow the suggestion above, but it does not appear Nuxt3 is picking up the interfaces and importing automatically. I'm using VSCode, Nuxt 3.0.0. I have a the following structure:

/types/User.d.ts

declare interface IsUser {
  _id: string;
  fullName: string;
  userType: UserTypeEnum;
}

declare interface IsUserSetting {
  dark: boolean;
  defaultOrg: string | null;
  reportsShowList: boolean;
}


/components/User/Dialog.vue
<script setup lang="ts">
...
let user = ref<IsUser>({ ...BLANK_USER });
...
</script>
...

VSCode is complaining that "IsUser" is not found. Can you have multiple interface declarations per file? Could this be an ESLint config error? Thanks for your help.

granite elk