[Feature Request] Export TS types, interfaces

[websitevirtuoso]

Problem to solve

Let's consider next struct

const headers: DataTableHeader[] = [
  { title: '#', key: 'id' },
  { title: t('messages.name'), key: 'name' },
  { title: t('messages.lat'), key: 'lat' },
  { title: t('messages.lng'), key: 'lng' },
  { title: t('messages.state'), key: 'state', value: 'state.name', sortable: false },
  { title: t('messages.country'), key: 'country', value: 'state.country.name', sortable: false },
]
if(can('upsert', 'city')) {
  headers.push({ title: t('messages.actions'), key: 'action', sortable: false, align: 'end' })
}

We as developers don't have access to defined types, interfaces as a result in my project I have to duplicate the same TS types

Proposed solution

Just add export to types, interfaces that you already defined

[joel-wenzel]

@websitevirtuoso I agree this should be done, i did find a workaround for now though:

import { VDataTable } from 'vuetify/lib/labs/components'
export type VDataTableHeaderProps = Extract<
  VDataTable['$props']['headers'][number],
  DataTableHeader[]
>[number]

I do get a somewhat misleading typescript error for unresolved type on DataTableHeader but it does in fact still work.

[aentwist]

This is very specifically about Labs, right? There is currently nothing to export anything other than the components.

Edit: I see the Anchor issue. Looks like this issue is being purposed for all of Vuetify

[websitevirtuoso]

I have no idea about all types. Because I used only types from datatable. I had to copy this types into my own code and use them with "todo commend". I hope that they will create index.d.ts for us with exported types and interfaces

[felicienfrancois]

@joel-wenzel a simpler variant with no typescript error

import { VDataTable } from 'vuetify/labs/VDataTable';
export type VDataTableHeaderProps = Extract<VDataTable['$props']['headers'][number], {key: string}>

[nowaysgit]

@joel-wenzelболее простой вариант без ошибок машинописного текста

import { VDataTable } from 'vuetify/labs/VDataTable';
export type VDataTableHeaderProps = Extract<VDataTable['$props']['headers'][number], {key: string}>

very sad situation
vuetify: 3.3.6
typescript: 5.1.6
vue-tsc: 1.8.3

error TS2537: Type 'DeepReadonly<DataTableHeader[] | DataTableHeader[][]> | undefined' has no matching index signature for type 'number'.

export type VDataTableHeaderProps = Extract<VDataTable["$props"]["headers"][number], { key: string }>;

[felicienfrancois]

@nowaysgit

export type VDataTableHeaderProps = Extract<Extract<VDataTable["$props"]["headers"], Readonly<Array>>[number], {key: string}>

[MatthewAry]

See the following for references and examples:

• https://vuejs.org/guide/typescript/composition-api.html
• https://www.radix-vue.com/guides/styling.html#extending-a-primitive

This is what I would like to be able to do but currently cannot.

<script setup lang="ts">
import { VCard, type VCardProps } from "vuetify/components/VCard";

interface Props extends VCardProps {
  foo: string;
}

const props = defineProps<Props>();
</script>

<template>
  <VCard v-bind="props" />
</template>

[websitevirtuoso]

Yes I can confirm that rignt now is much better with exports types and interfaces.

For example:
my code before:

import { DataTableHeader } from '@/types/vuetify'

const headers: DataTableHeader[] = [
  { title: '#', key: 'id', sortable: false },
  { title: t('messages.name'), key: 'name', sortable: false },
  { title: t('messages.description'), key: 'description', sortable: false },
]

if (can('update', 'listing_term')) {
  headers.push({ title: t('messages.actions'), key: 'action', sortable: false, align: 'end' })
}

my file @/types/vuetify with all duplicated types from vuetify
code after refactoring vuetify and using their types

import { VDataTableColumn } from 'vuetify/lib/labs/VDataTable/VDataTableColumn'

const headers: VDataTableColumn[] = [
  { title: '#', key: 'id', sortable: false },
  { title: t('messages.name'), key: 'name', sortable: false },
  { title: t('messages.description'), key: 'description', sortable: false },
]

if (can('update', 'listing_term')) {
  headers.push({ title: t('messages.actions'), key: 'action', sortable: false, align: 'end' })
}

So can I close this issue?

[MatthewAry]

@websitevirtuoso I don't think so. It seems like the team has expanded the scope of this issue such that it's be come a META issue.

[lenargum]

This is very specifically about Labs, right? There is currently nothing to export anything other than the components.
Edit: I see the Anchor issue. Looks like this issue is being purposed for all of Vuetify

Any news about the Anchor part ? If we made a props used in location props of VMenu or VTooltip, we can't use it because it must be Anchor | undefined but we can't import Anchor....

Here is dirty workaround if anyone interested. Just declare Anchor type manually 😁

declare const block: readonly ["top", "bottom"];
declare const inline: readonly ["start", "end", "left", "right"];
type Tblock = typeof block[number];
type Tinline = typeof inline[number];
type Anchor = Tblock | Tinline | 'center' | 'center center' | `${Tblock} ${Tinline | 'center'}` | `${Tinline} ${Tblock | 'center'}`;

[throrin19]

@lenargum this is not a long term solution. For that vuetify team must export it.

[mcfarljw]

I find myself wanting to get the exported interface shape of emitted events frequently. I don't see it mentioned specifically here so I'm posting in my use case with needing the typings from emitted events for reference:

// Vuetify
export interface SomeVuetifyEmitEvent { 
    id: unknown
    value: boolean
    path: unknown[]
    event: MouseEvent | PointerEvent
}

emits: {
    'update:selected': (value: unknown[]) => true,
    'update:opened': (value: unknown[]) => true,
    'click:open': (value: SomeVuetifyEmitEvent) => true,
    'click:select': (value: SomeVuetifyEmitEvent) => true,
},

// Client
import type { SomeVuetifyEmitEvent } from 'vuetify/VSelect'

function onSortSelect(event: SomeVuetifyEmitEvent) {
    const id = event.id as string
    const paths event.paths as string[]
}

[MatthewAry]

Looking to get prop types for DataTables?

type VDataTableProps = InstanceType<typeof VDataTable>['$props']

This might help until the promised day of better types comes.

[msladek]

How do I get at generic types like DataTableItem<T>, ItemSlotBase<T> and ItemKeySlot<T> needed for cell-props or row-props as a workaround?

[jscottsf]

In case anyone is trying to do this with JSDoc -- this works.

    <v-data-table
      v-model:items-per-page="table.itemsPerPage"
      v-model:sort-by="table.sortBy"
      :headers="table.headers"
      :loading="loading"
      :items="scores"
      :items-per-page-options="table.itemsPerPageOptions"
    >
...

<script>
/**
 * @typedef { import("vuetify/components").VDataTable["$props"]["headers"] } VDataTableHeaders
 * @typedef { import("vuetify/components").VDataTable["$props"]["sortBy"] } VDataTableSortItems
 */
</script>

<script setup>
const table = reactive({
  /** @type {VDataTableHeaders} */
  headers: [
    { sortable: true, title: 'Label', value: 'label' },
    { align: 'end', sortable: true, title: 'Score', value: 'score' }
  ],
  itemsPerPage: 5,
  itemsPerPageOptions: [
    { value: 5, title: '5' },
    { value: -1, title: '$vuetify.dataFooter.itemsPerPageAll' }
  ],
  /** @type {VDataTableSortItems} */
  sortBy: [{ key: 'score', order: 'desc' }]
})
...

[ramseyfeng]

Any update on this issue? We want to access the type definition of location...

[davidstackio]

To get my headers working without the typescript error I used as const as suggested here #19599.

Example:

<script setup lang="ts">
const headers = [
  {
    title: "Dessert (100g serving)",
    align: "start",
    sortable: false,
    key: "name",
  },
  { title: "Calories", key: "calories", align: "end" },
  { title: "Fat (g)", key: "fat", align: "end" },
  { title: "Carbs (g)", key: "carbs", align: "end" },
  { title: "Protein (g)", key: "protein", align: "end" },
  { title: "Iron (%)", key: "iron", align: "end" },
] as const;
</script>

[gabrieljbaker]

seconding the importance of this

I get TS errors when importing:

import {
LocationStrategyData,
StrategyProps,
} from "vuetify/lib/components/VOverlay/locationStrategies";

[darkbasic]

I second this: vuetify lacks important features like resizable tables which can only be implemented via dynamic wrapper components which unfortunately will get you rid of any typings for the props/slots/etc because you cannot import them from vuetify.

[septatrix]

Bonus points when also adding generics support: vuejs/core#7963. That would be ideal for stuff like data tables etc

[Ricky816845]

It's been a year，Any updates?

Or still have to export type define to my own file?

[KaelWD]

#20484 allows anything to be imported from vuetify/lib/whatever.js. I'm going to leave this issue open for now though as internal types are sometimes moved to different files so importing from /lib is exposing implementation details, we still need to decide which interfaces should be public and re-export them from either vuetify, vuetify/components, or vuetify/components/<NAME>.
#20484 can be tested now by installing vuetify@npm:@vuetify/nightly@3.7.6-dev.2025-01-15

[Scandal-UK]

Regarding Default export of the module has or is using private name 'SubmitEventPromise', are there any known workarounds to prevent this same old error when adding VForm to our project?

Seems to me we must either downgrade vuetify or typescript to compile templates - or remove v-form instances, I suppose

[jannes-io]

Same for VAutoComplete, would appreciate exports on all of the Filter* interfaces.

[RonAruch]

Do you happen to have any updates about this feature?
Access to the component props type is a basic need.