Configuration incompatibilities between createVuetify and defineVuetifyConfiguration

[Kasheftin]

I'm trying to migrate to nuxt4 and at the same time start using vuetify-nuxt-module.

I have the working code on nuxt3.16 + vuetify3.7.3 + no vuetify-nuxt-module. There's just a plain createVuetify nuxt plugin. This is how it looks:

import { camelize, h } from 'vue'
import { createVuetify, type IconProps } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg'
import { VSvgIcon } from 'vuetify/components/VIcon'
import * as mdiSvg from '@/utils/icons'

export default defineNuxtPlugin((app) => {
  const vuetify = createVuetify({
    ssr: true,
    defaults: { ... },
    icons: {
      defaultSet: 'mdi',
      aliases,
      sets: {
        mdiSvg: mdi,
        mdi: {
          component: (props: IconProps) => {
            const icon = mdiSvg[camelize(props.icon as string) as keyof typeof mdiSvg]
            return h(VSvgIcon, { ...props, icon })
          }
        }
      }
    }
})
app.vueApp.use(vuetify)

I installed nuxt4 + vuetify3.9.3 + vuetify-nuxt-module0.18.7. I'm trying to move the configuration, defined in createVuetify, to vuetify-nuxt-module way. I tried doing it in vuetify.config.ts file:

export default defineVuetifyConfiguration({
  ...
})

The issue is that the specs don't match.

For example, ssr prop was a boolean.
Now it's { clientWidth: number }.
How to define it properly from now on?

icons.sets property becomes an array, and it does not support component prop.
How to use @mdi/js icons?

aliases prop becomes Record<string, string>, but in vuetify/iconsets/mdi-svg it's defined as

type IconValue = string | (string | [path: string, opacity: number])[] | JSXComponent;
declare const IconValue: PropType<IconValue>;
interface IconAliases {
    [name: string]: IconValue;
    complete: IconValue;
    ...
}