vuetifyjs / vuetifyjs/nuxt-module
Configuration incompatibilities between createVuetify and defineVuetifyConfiguration
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 286
- Forks
- 35
- Avg merge
- 5d 21h
- Merged PRs (30d)
- 4
Description
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;
...
}
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start by comparing the existing createVuetify plugin with the configuration schema accepted by defineVuetifyConfiguration in vuetify.config.ts. Trace the documented handling of ssr, icons.sets, component, and aliases, then verify that the migrated configuration supports the listed Nuxt 4 and Vuetify 3.9.3 use cases without type errors.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- nuxtjs, typescript
- Domain
- frontend, tooling
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100