How to use auto-import on interface or type? [nuxt 3]

Question

I have some types that i want to be auto imported in my nuxt 3 app, but every time i try exporting a ts file containing the types it somehow skips or ignorers the types. I found a way for them to globally imported to all typescript file, but i want them to be also to be on .vue files.

I have this file with my types.

useType.ts

export type ImageDocument = {
    buildId: string

    links: string[]
}

export type InventoryDocument = {
    buildId: string
    block: string
    count: number
}

The file is place in the /utils folder. I also tried moving it to the composables folder, but with no differences.

Unexacting

Answer 1

You need to declare the auto-import folder for your folder type in nuxt.config.ts:

 imports: {
    dirs: ['types/*.ts', 'store/*.ts', 'types/**/*.ts'],
  },

Sullyprudhomme

Answer 2

You can declare global.

// types/whatever.d.ts or types/whatever.ts

declare global {
  type ImageDocument {
    buildId: string
    links: string[]
  }
  
  type InventoryDocument{
    buildId: string
    block: string
    count: number
  }
}

export {};

// components/foo.vue
<script setup lang="ts">
const props = defineProps<{ image: ImageDocument }>();
</script>

Convery