@nuxt/ui with strictTemplates enabled causes typecheck errors

[some-user123]

Environment

---

• Operating System: Windows_NT
• Node Version: v20.11.1
• Nuxt Version: 3.14.0
• CLI Version: 3.15.0
• Nitro Version: 2.10.2
• Package Manager: pnpm@9.11.0
• Builder: -
• User Config: default
• Runtime Modules: @nuxt/ui@3.0.0-alpha.8
• Build Modules: -

---

Version

v3.0.0-alpha.8

Reproduction

https://github.com/some-user123/nuxt-ui-3-typeerrors

Description

• Installed nuxt
• Installed and configured @nuxt/ui
• Installed typescript/vue-tsc
• Enabled strictTemplates in tsconfig.json
• Run npx nuxi typecheck

Expected: no errors

Actually: 35 errors

$ npx nuxi typecheck
ℹ Nuxt Icon server bundle mode is set to local                                                      20:01:44
node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Alert.vue:126:11 - error TS2353: Object literal may only specify known properties, and '"aria-label"' does not exist in type '{ readonly label?: string | undefined; readonly color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined; readonly variant?: "link" | "solid" | ... 4 more ... | undefined; ... 36 more ...; readonly inactiveClass?: string | undefined; } & VNodeProps & AllowedComponentProps & ...'.

126           aria-label="Close"
              ~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Avatar.vue:75:8 - error TS2353: Object literal may only specify known properties, and 'alt' does not exist in type 'Partial<{ as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; }> & Omit<{ readonly as: Component | AsTag; readonly src: string; readonly asChild?: boolean | undefined; onLoadingStatusChange?: ((value: ImageLoadingStatus) => any) | undefined; } & VNodeProps & AllowedComponentProps & Compone...'.

75       :alt="alt"
          ~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Breadcrumb.vue:100:23 - error TS2353: Object literal may only specify known properties, and '"aria-label"' does not exist in type 'Partial<{ asChild: boolean; as: Component | AsTag; }> & Omit<{ readonly as: Component | AsTag; readonly asChild: boolean; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "as" | "asChild">'.

100   <Primitive :as="as" aria-label="breadcrumb" :class="ui.root({ class: [props.class, props.ui?.root] })">
                          ~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Breadcrumb.vue:105:54 - error TS2353: Object literal may only specify known properties, and '"aria-current"' does not exist in type '{ readonly as?: string | undefined; readonly type?: string | undefined; readonly disabled?: boolean | undefined; readonly onClick?: ((e: MouseEvent) => void | Promise<void>) | ((e: MouseEvent) => void | Promise<...>)[] | undefined; ... 4 more ...; readonly isExternal?: boolean | undefined; } & VNodeProps & AllowedCo...'.

105             <ULinkBase v-bind="slotProps" as="span" :aria-current="active && (index === items!.length - 1) ? 'page' : undefined" :class="ui.link({ class: [props.ui?.link, item.class], active: index === items!.length - 1, disabled: !!item.disabled, to: !!item.to })">
                                                         ~~~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Carousel.vue:282:11 - error TS2353: Object literal may only specify known properties, and '"aria-label"' does not exist in type '{ readonly label?: string | undefined; readonly color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined; readonly variant?: "link" | "solid" | ... 4 more ... | undefined; ... 36 more ...; readonly inactiveClass?: string | undefined; } & VNodeProps & AllowedComponentProps & ...'.

282           aria-label="Prev"
              ~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Carousel.vue:293:11 - error TS2353: Object literal may only specify known properties, and '"aria-label"' does not exist in type '{ readonly label?: string | undefined; readonly color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined; readonly variant?: "link" | "solid" | ... 4 more ... | undefined; ... 36 more ...; readonly inactiveClass?: string | undefined; } & VNodeProps & AllowedComponentProps & ...'.

293           aria-label="Next"
              ~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/CommandPalette.vue:248:15 - error TS2353: Object literal may only specify known properties, and '"aria-label"' does not exist in type '{ readonly label?: string | undefined; readonly color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined; readonly variant?: "link" | "solid" | ... 4 more ... | undefined; ... 36 more ...; readonly inactiveClass?: string | undefined; } & VNodeProps & AllowedComponentProps & ...'.

248               aria-label="Close"
                  ~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/ContextMenuContent.vue:94:15 - error TS2353: Object literal may only specify known properties, and 'type' does not exist in type 'Partial<{}> & Omit<{ readonly as?: Component | AsTag | undefined; readonly asChild?: boolean | undefined; readonly disabled?: boolean | undefined; readonly textValue?: string | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.

94               type="button"
                 ~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/DropdownMenuContent.vue:100:15 - error TS2353: Object literal may only specify known properties, and 'type' does not exist in type 'Partial<{}> & Omit<{ readonly as?: Component | AsTag | undefined; readonly asChild?: boolean | undefined; readonly disabled?: boolean | undefined; readonly textValue?: string | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.

100               type="button"
                  ~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/InputMenu.vue:262:6 - error TS2353: Object literal may only specify known properties, and 'id' does not exist in type '{ "onUpdate:open"?: ((value: boolean) => any) | undefined; "onUpdate:modelValue"?: ((value: AcceptableValue) => any) | undefined; "onUpdate:searchTerm"?: ((value: string) => any) | undefined; ... 15 more ...; as?: AsTag | ... 1 more ... | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps'.

262     :id="id"
         ~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/InputMenu.vue:274:6 - error TS2353: Object literal may only specify known properties, and 'onKeydown' does not exist in type 'NonNullable<{ "onUpdate:open"?: ((value: boolean) => any) | undefined; "onUpdate:modelValue"?: ((value: AcceptableValue) => any) | undefined; "onUpdate:searchTerm"?: ((value: string) => any) | undefined; ... 15 more ...; as?: AsTag | ... 1 more ... | undefined; } & VNodeProps & AllowedComponentProps & ComponentCusto...'.

274     @keydown.enter="$event.preventDefault()"
         ~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/InputMenu.vue:284:10 - error TS2353: Object literal may only specify known properties, and 'onBlur' does not exist in type 'NonNullable<{ onInvalid?: ((payload: string) => any) | undefined; "onUpdate:modelValue"?: ((payload: string[]) => any) | undefined; modelValue?: string[] | undefined; defaultValue?: string[] | undefined; ... 14 more ...; as?: AsTag | ... 1 more ... | undefined; } & VNodeProps & AllowedComponentProps & ComponentCusto...'.

284         @blur="onBlur"
             ~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/InputMenu.vue:285:10 - error TS2353: Object literal may only specify known properties, and 'onFocus' does not exist in type 'NonNullable<{ onInvalid?: ((payload: string) => any) | undefined; "onUpdate:modelValue"?: ((payload: string[]) => any) | undefined; modelValue?: string[] | undefined; defaultValue?: string[] | undefined; ... 14 more ...; as?: AsTag | ... 1 more ... | undefined; } & VNodeProps & AllowedComponentProps & ComponentCusto...'.

285         @focus="onFocus"
             ~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/InputMenu.vue:294:97 - error TS2353: Object literal may only specify known properties, and 'disabled' does not exist in type 'Partial<{ as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; }> & Omit<{ readonly as: Component | AsTag; readonly asChild?: boolean | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "as">'.

294           <TagsInputItemDelete :class="ui.tagsItemDelete({ class: props.ui?.tagsItemDelete })" :disabled="disabled">
                                                                                                    ~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/InputMenu.vue:306:14 - error TS2353: Object literal may only specify known properties, and 'required' does not exist in type 'Partial<{ as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; }> & Omit<{ readonly as: Component | AsTag; readonly asChild?: boolean | undefined; readonly placeholder?: string | undefined; readonly autoFocus?: boolean | undefined; readonly maxLength?: number | undefined; } & VNodeProps & A...'.

306             :required="required"
                 ~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/InputMenu.vue:318:10 - error TS2353: Object literal may only specify known properties, and 'placeholder' does not exist in type 'Partial<{ type: string; as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; }> & Omit<...>'.

318         :placeholder="placeholder"
             ~~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/LinkBase.vue:57:6 - error TS2345: Argument of type '{ rel: string | undefined; target: string | undefined; as: "a"; href: string | undefined; 'aria-disabled': string | undefined; role: string | undefined; tabindex: number | undefined; onClick: any; } | { ...; } | { ...; }' is not assignable to parameter of type 'Partial<{ asChild: boolean; as: Component | AsTag; }> & Omit<{ readonly as: Component | AsTag; readonly asChild: boolean; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "as" | "asChild">'.
  Object literal may only specify known properties, and 'rel' does not exist in type 'Partial<{ asChild: boolean; as: Component | AsTag; }> & Omit<{ readonly as: Component | AsTag; readonly asChild: boolean; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "as" | "asChild">'.

57     :rel="rel"
        ~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Modal.vue:146:21 - error TS2353: Object literal may only specify known properties, and '"aria-label"' does not exist in type '{ readonly label?: string | undefined; readonly color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined; readonly variant?: "link" | "solid" | ... 4 more ... | undefined; ... 36 more ...; readonly inactiveClass?: string | undefined; } & VNodeProps & AllowedComponentProps & ...'.

146                     aria-label="Close"
                        ~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/NavigationMenu.vue:202:43 - error TS2561: Object literal may only specify known properties, but 'dataOrientation' does not exist in type 'Partial<{ as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; modelValue: string; orientation: Orientation; delayDuration: number; skipDelayDuration: number; disableClickTrigger: boolean; disableHoverTrigger: boolean; }> & Omit<...>'. Did you mean to write 'orientation'?

202   <NavigationMenuRoot v-bind="rootProps" :data-orientation="orientation" :class="ui.root({ class: [props.class, props.ui?.root] })">
                                              ~~~~~~~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Pagination.vue:163:54 - error TS2353: Object literal may only specify known properties, and 'index' does not exist in type 'Partial<{}> & Omit<{ readonly as?: Component | AsTag | undefined; readonly asChild?: boolean | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.

163         <PaginationEllipsis v-else :key="item.type" :index="index" as-child>
                                                         ~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/RadioGroup.vue:142:6 - error TS2353: Object literal may only specify known properties, and 'id' does not exist in type 'Partial<{ disabled: boolean; loop: boolean; required: boolean; orientation: DataOrientation; }> & Omit<{ readonly disabled: boolean; readonly required: boolean; ... 8 more ...; "onUpdate:modelValue"?: ((payload: string) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "orientation"...'.

142     :id="id"
         ~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Select.vue:171:6 - error TS2353: Object literal may only specify known properties, and 'id' does not exist in type 'Partial<{ defaultValue: string; open: boolean; modelValue: string; }> & Omit<{ readonly defaultValue: string; readonly name?: string | undefined; readonly disabled?: boolean | undefined; ... 7 more ...; "onUpdate:modelValue"?: ((value: string) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCu...'.

171     :id="id"
         ~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue:228:6 - error TS2353: Object literal may only specify known properties, and 'id' does not exist in type '{ "onUpdate:open"?: ((value: boolean) => any) | undefined; "onUpdate:modelValue"?: ((value: T) => any) | undefined; "onUpdate:searchTerm"?: ((value: string) => any) | undefined; "onUpdate:selectedValue"?: ((value: T | undefined) => any) | undefined; ... 14 more ...; as?: AsTag | ... 1 more ... | undefined; } & VNode...'.

228     :id="id"
         ~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue:241:83 - error TS2353: Object literal may only specify known properties, and 'tabindex' does not exist in type 'Partial<{ as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; }> & Omit<{ readonly as: Component | AsTag; readonly asChild?: boolean | undefined; readonly disabled?: boolean | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, "as">'.

241       <ComboboxTrigger :class="ui.base({ class: [props.class, props.ui?.base] })" tabindex="0">
                                                                                      ~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue:272:11 - error TS2561: Object literal may only specify known properties, but 'autofocus' does not exist in type 'Partial<{ type: string; as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; }> & Omit<...>'. Did you mean to write 'autoFocus'?

272           autofocus
              ~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Slideover.vue:121:23 - error TS2353: Object literal may only specify known properties, and 'dataSide' does not exist in type 'Partial<{}> & Omit<{ readonly as?: Component | AsTag | undefined; readonly asChild?: boolean | undefined; readonly forceMount?: boolean | undefined; ... 7 more ...; onCloseAutoFocus?: ((event: Event) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'.

121       <DialogContent :data-side="side" :class="ui.content({ class: [props.class, props.ui?.content] })" v-bind="contentProps" v-on="contentEvents">
                          ~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Slideover.vue:145:21 - error TS2353: Object literal may only specify known properties, and '"aria-label"' does not exist in type '{ readonly label?: string | undefined; readonly color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined; readonly variant?: "link" | "solid" | ... 4 more ... | undefined; ... 36 more ...; readonly inactiveClass?: string | undefined; } & VNodeProps & AllowedComponentProps & ...'.

145                     aria-label="Close"
                        ~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Slider.vue:98:6 - error TS2353: Object literal may only specify known properties, and 'id' does not exist in type 'Partial<{ defaultValue: number[]; disabled: boolean; orientation: DataOrientation; step: number; max: number; min: number; inverted: boolean; minStepsBetweenThumbs: number; }> & Omit<...>'.

98     :id="id"
        ~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Table.vue:198:14 - error TS2353: Object literal may only specify known properties, and '"data-pinned"' does not exist in type 'ThHTMLAttributes & ReservedProps'.

198             :data-pinned="header.column.getIsPinned()"
                 ~~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Table.vue:211:18 - error TS2353: Object literal may only specify known properties, and '"data-selected"' does not exist in type 'HTMLAttributes & ReservedProps'.

211             <tr :data-selected="row.getIsSelected()" :data-expanded="row.getIsExpanded()" :class="ui.tr({ class: [props.ui?.tr] })">
                     ~~~~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Table.vue:215:18 - error TS2353: Object literal may only specify known properties, and '"data-pinned"' does not exist in type 'TdHTMLAttributes & ReservedProps'.

215                 :data-pinned="cell.column.getIsPinned()"
                     ~~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Toast.vue:154:13 - error TS2353: Object literal may only specify known properties, and '"aria-label"' does not exist in type '{ readonly label?: string | undefined; readonly color?: "error" | "primary" | "secondary" | "success" | "info" | "warning" | "neutral" | undefined; readonly variant?: "link" | "solid" | ... 4 more ... | undefined; ... 36 more ...; readonly inactiveClass?: string | undefined; } & VNodeProps & AllowedComponentProps & ...'.

154             aria-label="Close"
                ~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Toaster.vue:106:8 - error TS2353: Object literal may only specify known properties, and 'dataExpanded' does not exist in type '{ readonly as?: any; readonly title?: string | undefined; readonly description?: string | undefined; readonly icon?: string | undefined; readonly avatar?: AvatarProps | undefined; ... 17 more ...; readonly onSwipeEnd?: ((event: SwipeEvent) => any) | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustom...'.

106       :data-expanded="expanded"
           ~~~~~~~~~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Toaster.vue:120:8 - error TS2353: Object literal may only specify known properties, and 'onClick' does not exist in type 'NonNullable<{ readonly as?: any; readonly title?: string | undefined; readonly description?: string | undefined; readonly icon?: string | undefined; readonly avatar?: AvatarProps | undefined; ... 17 more ...; readonly onSwipeEnd?: ((event: SwipeEvent) => any) | undefined; } & VNodeProps & AllowedComponentProps & Com...'.

120       @click="toast.click && toast.click(toast)"
           ~~~~~

node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime/components/Toaster.vue:124:8 - error TS2353: Object literal may only specify known properties, and 'dataExpanded' does not exist in type 'Partial<{ label: string | ((hotkey: string) => string); as: AsTag | Component<any, any, any, ComputedOptions, MethodOptions, {}, any>; hotkey: string[]; }> & Omit<...>'.

124       :data-expanded="expanded"
           ~~~~~~~~~~~~~


Found 35 errors in 20 files.

Additional context

No response

Logs

No response

[hywax]

Add the node_modules folder to ignore. You should not go inside the libraries.

[some-user123]

nuxt autogenerates .nuxt/tsconfig.json which contains both includes and excludes. Excerpt:

  "include": [
    "./nuxt.d.ts",
    "../.config/nuxt.*",
    "../**/*",
    //...
    "../node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/runtime",
    "../node_modules/.pnpm/@nuxt+ui@3.0.0-alpha.8_@babel+parser@7.26.2_change-case@5.4.4_embla-carousel@8.3.1_ioredis@5._ijev2tcjydqcdikviydmvhkbzq/node_modules/@nuxt/ui/dist/runtime",

  "exclude": [
    "../dist",
    "../node_modules",
    "../node_modules/.pnpm/nuxt@3.14.0_@parcel+watcher@2.5.0_@types+node@22.9.0_ioredis@5.4.1_lightningcss@1.28.1_magica_x3y46x7cew36owemzwsfja6ire/node_modules/nuxt/node_modules",
    // ...

My point is, that users of nuxt and nuxt/ui shouldn't have to take care of internals of nuxt and nuxt/ui. I don't care, if the solution is a suitable autogenerated tsconfig.json or the removal of the type errors.

[benjamincanac]

Why do you use the strictTemplates option exactly? I can't find any documentation about this. Also, the errors mentioned don't seem to be easily fixable. If we have to type aria-label or any other html attribute on every component we'll still be there last year. Have you tried with Radix Vue only? I'm pretty sure it will do the same thing.

Since you just want to rely on the generated tsconfig.json from nuxt, why override it?

[some-user123]

Why do you use the strictTemplates option exactly?

strictTemplates basically enables type safety for templates. So, things we are used to in Type Script are getting applied and available in the template section as well, i.e.: You cannot access unknown properties.

In script you get complaints if you're accessing invalid properties:

Property 'len' does not exist on type 'string'.

That avoids typing mistakes, helps you identify properties that aren't valid any more because the interface changed etc.

With strictTemplates you get the same in the template as well:

Object literal may only specify known properties, and 'len' does not exist in type 'InputHTMLAttributes & ReservedProps'.

If we have to type aria-label or any other html attribute on every component we'll still be there last year.

As @hywax has suggested, maybe something is wrong with the config here as type errors within libraries should normally not be reported to the user.

As said in #731, it's absolutely not necessary to manually type all the html attributes. This has already been done. For your components, you should be able to merge the types so that the information gets propagated.

Have you tried with Radix Vue only?

We haven't considered Radix Vue as a choice for our ui tooling, but @nuxt/ui. Therefore evaluating @nuxt/ui among others.

Using Radix Vue doesn't cause type errors on import.

Since you just want to rely on the generated tsconfig.json from nuxt, why override it?

We want to rely on the autogenerated tsconfig.json as far as possible. As nuxt documentation suggests, the content can be customized to a certain extend. With respect to strictTemplates the autogenerated config neither enables nor disables it. Unlike the paths.