Как исправить работу рендеринга компонентов Vuetify 3 и Nuxt 3?

Question

[Айнур Ярулин]

Здравствуйте, столкнулся с проблемой, если коротко, то первые 2-3 секунды после обновления страницы элементы отображаются неправильно, вот пример как это выглядит:

Спойлер: Первые 2-3 секунды

Спойлер: Нормальный результат

Согласитесь, это не то, что хотелось бы видеть. Проблема есть во всех браузерах. Приложение абсолютно пустое, а сам Vuetify я подключил вот так:

Спойлер: plugins/vuetify.ts

// plugins/vuetify.ts
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components,
    directives,
    ssr: true,
  })

  nuxtApp.vueApp.use(vuetify)
})

Спойлер: nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  css: [
    'vuetify/lib/styles/main.sass',
    '@mdi/font/css/materialdesignicons.min.css'
  ],
  build: {
    transpile: ['vuetify'],
  },
  vite: {
    define: {
      'process.env.DEBUG': false,
    },
  },
})

По началу я думал что это проблема только на этапе разработки, но после сборки проекта проблема никуда не исчезла.

Comments

[Айнур Ярулин]

Или может, кто работал с Nuxt + Vuetify, покажите как вы его подключали