vuetifyjs / vuetifyjs/nuxt-module

Configuration incompatibilities between createVuetify and defineVuetifyConfiguration

Open
#331 0 comments 1 reaction 0 assignees View on GitHub

Nobody has claimed this yet.

area: config bug priority: p2: high
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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.