[Bug Report][3.10.3] VDateInput - Manual import and registration with the Vuetify instance.

[mickosi]

Environment

Vuetify Version: 3.10.3
Vue Version: 3.5.22
OS: Linux undefined (current)

Steps to reproduce

1. nuxt 4 + vuetify module

Expected Behavior

No warnings

Actual Behavior

"enter")[]; } & { ...; } & { ...; }, ... 24 more ..., { ...; ...' is not assignable to type '"VApp" | "VAppBar" | "VAppBarNavIcon" | "VAppBarTitle" | "VAlert" | "VAlertTitle" | "VAutocomplete" | "VAvatar" | "VBadge" | "VBanner" | "VBannerActions" | "VBannerText" | "VBottomNavigation" | ... 158 more ... | "VDialogTransition"'.ts(2322)
(alias) const VDateInput: {
    new (...args: any[]): CreateComponentPublicInstanceWithMixins<{
        style: string | false | StyleValue[] | CSSProperties | null;
        mobile: boolean | null;
        focused: boolean;
        errorMessages: string | readonly string[] | null;
        maxErrors: string | number;
        readonly: boolean | null;
        rules: readonly (string | boolean | PromiseLike<ValidationResult> | ((value: any) => ValidationResult) | ((value: any) => PromiseLike<ValidationResult>) | [string, any, (string | undefined)?])[];
        ... 47 more ...;
        updateOn: ("blur" | "enter")[];
    } & {
        ...;
    } & {
        ...;
    }, ... 24 more ..., {
        ...;
    }>;
    __isFragment?: undefined;
    __isTeleport?: undefined;
    __isSuspense?: undefined;
} & ... 5 more ... & FilterPropsOptions<...>
import VDateInput

Reproduction Link

https://github.com/mickosi/nuxt-error1/tree/main

https://vuetifyjs.com/en/components/date-inputs/#installation

Images

[mickosi]

also

Right side of assignment cannot be destructured
at (/home/Desktop/v4/node_modules/vuetify-nuxt-module/dist/module.mjs:799:22)
at forEach (native:1:11)
at buildConfiguration (/home/Desktop/v4/node_modules/vuetify-nuxt-module/dist/module.mjs:798:21)
at processTicksAndRejections (native:7:39)

if i

  // Vuetify UI: https://vuetify-nuxt-module.netlify.app/guide
  vuetify: {
    moduleOptions: {
      /* module specific options */
      /* https://www.youtube.com/watch?v=aamWg1TuC3o */
      // disableVuetifyStyles: true,
      styles: {
        configFile: 'assets/scss/components.scss',
      },
    },
    vuetifyOptions: {
      components: [
        VApp,
        VAppBar,
        VAppBarNavIcon,
        VAutocomplete,
        VAvatar,
        VBadge,
        VBreadcrumbs,
        VBtn,
        VBtnToggle,
        VCard,
        VCardText,
        VCardTitle,
        VCardSubtitle,
        VCheckbox,
        VChip,
        VCol,
        VContainer,
        VDataTable,
        VDataTableServer,
        VDateInput,
        VDivider,
        VForm,
        VIcon,
        VImg,
        VLayout,
        VList,
        VListGroup,
        VListItem,
        VListItemAction,
        VMain,
        VMenu,
        VNavigationDrawer,
        VOtpInput,
        VRadioGroup,
        VRating,
        VRow,
        VSelect,
        VSheet,
        VSkeletonLoader,
        VSlideGroup,
        VSlideGroupItem,
        VSpacer,
        VSwitch,
        VTab,
        VTabs,
        VTabsWindow,
        VTabsWindowItem,
        VTextField,
        VTextarea,
        VTooltip,
        VVirtualScroll,
        VWindow,
        VWindowItem,
      ],
      defaults: {
        VAppBar: {
          border: 0,
          color: 'background',
        },
    },

[mickosi]

https://github.com/mickosi/nuxt-error1/tree/main

[mickosi]

How to limit css what is used to only used components, because now it load for all components like VVideo and other

vuetify: {
    vuetifyOptions: {
      components: [
        'VApp',
        'VAppBar',
        'VAppBarNavIcon',
        'VAutocomplete',
        'VAvatar',
        'VBadge',
        'VBreadcrumbs',
        'VBtn',
        'VBtnToggle',
        'VCard',
        'VCardText',
        'VCardTitle',
        'VCardSubtitle',
        'VCheckbox',
        'VChip',
        'VCol',
        'VContainer',
        'VDataTable',
        'VDataTableServer',
        // 'VDateInput',
        'VDivider',
        'VForm',
        'VIcon',
        'VImg',
        'VLayout',
        'VList',
        'VListGroup',
        'VListItem',
        'VListItemAction',
        'VMain',
        'VMenu',
        'VNavigationDrawer',
        'VOtpInput',
        'VRadioGroup',
        'VRating',
        'VRow',
        'VSelect',
        'VSheet',
        'VSkeletonLoader',
        'VSlideGroup',
        'VSlideGroupItem',
        'VSpacer',
        'VSwitch',
        'VTab',
        'VTabs',
        'VTabsWindow',
        'VTabsWindowItem',
        'VTextField',
        'VTextarea',
        'VTooltip',
        'VVirtualScroll',
        'VWindow',
        'VWindowItem',
      ],
      defaults: {
        VAppBar: {
          border: 0,
          color: 'background',
        },
      },
      theme: {
        defaultTheme: 'light',
        themes: {
          dark,
          light,
        },
      },
    },
}

[mickosi]

empty app

1064 requests
19.7 MB transferred
19.6 MB resources
Finish: 2.6 min

[J-Sek]

a quick idea to try

    vuetifyOptions: {
-      components: [
+      labComponents: [
        VDateInput,
      ],

[mickosi]

But how to limit components css what are loaded. I added all needed components in that options, but in browser console i see that it load css for all components, I'm sure what i not use VVideo and other of such components, but i continue to see what it's css is continuing be loaded

[J-Sek]

The linked reproduction should showcase a bug - it is just a mess created without following the documentation. When fixed, I don't see .v-video in CSS created by bun run generate. Megabytes of "transferred" assets for an empty app are a sign that you run the app locally in dev mode.

If you are a beginner and feel overwhelmed by a new tech, it is better to reach out on Discord.
Before you do this, the bare minimum we would expect is to have minimal reproduction and some context.

[mickosi]

so that work only in prod mode, in dev it always will download a all components styles?