Types extending

To extend global types provided by nuxt-typo3, please follow this guide:

Add type declaration file

Add typo3-types.d.ts in root directory

typo3-types.d.ts
declare module '@t3headless/nuxt-typo3' {
    interface T3InitialData{
        yourkey: string
    }
}

export {}

Components interfaces

At this moment, we have not found a native way to extend the interfaces of components - it seems that Vue.js struggles with this. While the IDE correctly recognizes the extended types, during the Vue.js runtime, we receive warnings that a given prop has not been defined.

A workaround is to create our own types by extending types from nuxt-typo3 and using them as the prop definitions of the component:

typo3-types.d.ts
import type { T3CeBulletsProps } from "@t3headless/nuxt-typo3"

// extend T3CeBaseProps
type CeBaseProps = {
  summary: string
}

// extend T3CeBulletsProps
export type CeBulletsProps = T3CeBulletsProps & CeBaseProps & {
  additionalKeyForBullets?: string
}
T3CeBullets.vue
<script lang="ts" setup>
import { CeBulletsProps } from 'typo3-types';
const props = defineProps<CeBulletsProps>()
</script>

Related issue: https://github.com/vuejs/core/issues/8286