Nuxt•7mo ago

Import types from another component

When I write an interface in a component and want to import it somewhere else, I get this error: Cannot find module '@/components/commons/inputs/AppRadioButtonGroup' or its corresponding type declarations. I tried moving the type into a separate file (not what I want ideally) but then I get a warning: Two component files resolving to the same name AppRadioButton Is there a good way to do this?

10 Replies

vitta•7mo ago

do you export the interface? and then import type {...} from?

Gawel91•7mo ago

Yes and yes

vitta•7mo ago

can you provide some code? can you see the component in the component.d.ts file generated by nuxt?

oneeach•7mo ago

The way we have this setup for our nuxt3 project is we created a types folders and then imported it in our nuxt.config.ts file:

export default defineNuxtConfig({
  imports: { dirs: ["types"] }
})

export default defineNuxtConfig({
  imports: { dirs: ["types"] }
})

inside our types directory, we have an index.d.ts file that looks like this:

export { };
declare global {
  interface TypeName {
    name: string
    number: number
  }
}

export { };
declare global {
  interface TypeName {
    name: string
    number: number
  }
}

Then the TypeName type can be used globally without having to import it

Single•7mo ago

Yeah, don't do this. Start with the types folder as @oneeach suggested and add your exported types here. Use them wherever you need them. Nuxt will handle the auto-import.

Gawel91•7mo ago

Yeah but I don't want X+1 file for each component (the component, and its typing)

oneeach•7mo ago

it's a good practice to consolidate all of your types into one location so you don't have to hunt around for where you defined an interface and updating them in the future is easier if needed

pyplacca•7mo ago

Quick question: why use declare global if you’re configuring auto-imports for the types folder?

oneeach•7mo ago

I don't believe the types folder is auto-imported so you have to tell nuxt to import that folder at runtime. The declare global just allows the types to be used globally without having to import them in your project every time.

pyplacca•7mo ago

@oneeach, you don’t need auto import if you declare global and vice versa. They both work differently but with similar experiences. See here for how to enable auto import for types https://discord.com/channels/473401852243869706/1227901860262842448/1227905843689947176

Gaming

Programming

Import types from another component