Nuxt•5d ago

How export interfaces after build module?

Recently I no longer export my interfaces to the types.d.ts file that gets generated during module build. Example (module.ts):

export interface structureModel {
  name: string,
  surname: string,
  age: number
}

export default defineNuxtModule({..});

export interface structureModel {
  name: string,
  surname: string,
  age: number
}

export default defineNuxtModule({..});

In the types.d.ts file after it was built, it used to look like this:

import type { NuxtModule } from '@nuxt/schema'

import type { default as Module } from './module'

export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>

export { type structureModel, default } from './module'

import type { NuxtModule } from '@nuxt/schema'

import type { default as Module } from './module'

export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>

export { type structureModel, default } from './module'

and now it looks like this

import type { NuxtModule } from '@nuxt/schema'

import type { default as Module } from './module'

export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>

export { default } from './module' //<-- missing structureModel, where?

import type { NuxtModule } from '@nuxt/schema'

import type { default as Module } from './module'

export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>

export { default } from './module' //<-- missing structureModel, where?

8 Replies

kapa.ai•5d ago

Hi @Cesxhin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on your question about exporting interfaces in Nuxt modules, I can see you're experiencing an issue with type declarations not being properly exported in your built module. This appears to be related to a change in how type declarations are handled in Nuxt modules. The issue you're experiencing is that your structureModel interface is no longer being automatically exported in the generated types.d.ts file after building your module. Solution: Adding Type Declarations Manually To ensure your interfaces are properly exported, you should use the addTypeTemplate utility from @nuxt/kit. This allows you to explicitly add type declarations that will be available to users of your module:

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'

export interface structureModel {
  name: string,
  surname: string,
  age: number
}

export default defineNuxtModule({
  // Your module definition
  setup(options, nuxt) {
    // Add your type declarations
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        // Generated by my-module
        export interface structureModel {
          name: string,
          surname: string,
          age: number
        }
      `
    })
    
    // Rest of your module setup
  }
})

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'

export interface structureModel {
  name: string,
  surname: string,
  age: number
}

export default defineNuxtModule({
  // Your module definition
  setup(options, nuxt) {
    // Add your type declarations
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        // Generated by my-module
        export interface structureModel {
          name: string,
          surname: string,
          age: number
        }
      `
    })
    
    // Rest of your module setup
  }
})

This approach ensures that your type declarations are properly included in the built module and available to users of your module Module Author Guide. Alternative Approach If you need more control over how your types are included, you can use the prepare:types hook:

const typeTemplate = addTemplate({
  filename: 'types/my-module.d.ts',
  getContents: () => `
    // Generated by my-module
    export interface structureModel {
      name: string,
      surname: string,
      age: number
    }
  `
})

nuxt.hook('prepare:types', ({ references }) => {
  references.push({ path: typeTemplate.dst })
})

const typeTemplate = addTemplate({
  filename: 'types/my-module.d.ts',
  getContents: () => `
    // Generated by my-module
    export interface structureModel {
      name: string,
      surname: string,
      age: number
    }
  `
})

nuxt.hook('prepare:types', ({ references }) => {
  references.push({ path: typeTemplate.dst })
})

This change in behavior might be related to recent updates in how Nuxt handles type declarations for modules, particularly with the introduction of better support for virtual files as mentioned in a recent PR fix(nuxt): add module declarations for virtual files. When building your module, make sure to use the nuxi build-module command which properly handles type generation for Nuxt modules nuxi build-module. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@552606377067937792> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

CesxhinOP•5d ago

@kapa.ai After declare addTypeTemplate into defineNuxtModule, how use interface structureModel in playground?

kapa.ai•5d ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Based on your question about using the structureModel interface in your playground after declaring it with addTypeTemplate, I'll explain how to properly access and use these types. When you use addTypeTemplate to add type declarations in your module, these types become available in the Nuxt application that uses your module. For your playground (which is typically used during module development), you need to ensure the types are properly referenced. Here's how to use the structureModel interface in your playground: 1. Make sure your type template is properly defined First, ensure your type template is correctly defined in your module:

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        // Generated by my-module
        export interface structureModel {
          name: string,
          surname: string,
          age: number
        }
      `
    })
  }
})

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'

export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `
        // Generated by my-module
        export interface structureModel {
          name: string,
          surname: string,
          age: number
        }
      `
    })
  }
})

2. Using the interface in your playground After running your playground with npm run dev (which should automatically build your module), you can import and use the interface in your playground files:

// In your playground files (e.g., app.vue, pages/*.vue, etc.)
import type { structureModel } from '#build/types/my-module'

// Now you can use the interface
const person: structureModel = {
  name: 'John',
  surname: 'Doe',
  age: 30
}

// In your playground files (e.g., app.vue, pages/*.vue, etc.)
import type { structureModel } from '#build/types/my-module'

// Now you can use the interface
const person: structureModel = {
  name: 'John',
  surname: 'Doe',
  age: 30
}

The #build prefix is a special alias in Nuxt that points to the build directory where your type declarations are generated. Alternative approach for server-side types If you need to use these types on the server side as well, you might need to augment both Nuxt and Nitro types. Recent updates to Nuxt allow augmenting both contexts with a single addTypeTemplate call:

addTypeTemplate({
  filename: 'types/my-module.d.ts',
  getContents: () => `
    // Generated by my-module
    export interface structureModel {
      name: string,
      surname: string,
      age: number
    }
  `,
  options: {
    // Enable for both client and server contexts
    nitro: true
  }
})

addTypeTemplate({
  filename: 'types/my-module.d.ts',
  getContents: () => `
    // Generated by my-module
    export interface structureModel {
      name: string,
      surname: string,
      age: number
    }
  `,
  options: {
    // Enable for both client and server contexts
    nitro: true
  }
})

This enhancement was added in a recent update to allow augmenting both Nuxt and Nitro types with a single call feat(kit,nuxt): augment nitro types with addTypeTemplate. Remember that after making changes to your module, you may need to restart your development server to see the updated types in your playground. If you're still having issues with the types not being recognized, you might need to manually add a reference to your types in your tsconfig.json file in the playground. Let me know if you encounter any specific issues with this approach! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@552606377067937792> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

anita•5d ago

Locale selector to send the user to the homepage: but now change with current path

LangSelect.vue

anita•5d ago

how to use useSwitchLocalePath without redirecting with current path

CesxhinOP•2d ago

delete message please

Gaming

Programming

How export interfaces after build module?

Did you find this page helpful?