Как подождать выполнение JS стилей на Nuxt.js?

Question

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

Приступил к изучению Nuxt.js и столкнулся с проблемой, что при обновлении страницы сайт "прыгает", на чистом Vue такой проблемы не было, использую UI фреймворк Vuetify.

Подозреваю, проблема в том, что Nuxt отдаёт сгенерированную HTML страницу, но стили Vuetify, которые созданы с помощью JS еще не успевают применится, поэтому происходит этот самый "прыжок".

Подскажите как с помощью Nuxt'а можно подождать, пока выполнится загрузка JS, и не повлияет ли это на SEO?

Answer 1

[Константин Б.]

Ищите проблему в написаном вами коде или библиотеках. Использую Nuxt в работе 3 года и с такими проблемами не сталкивался. Возможно какие-то компоненты начинают работу только на клиенте. Нужно изучать ваш проект, а не гадать.

Comments

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

Возможно какие-то компоненты начинают работу только на клиенте

Да скорее всего так и есть, но как это можно решить?

Например самая видимая проблема - это то, что сначала имеет не 100% ширину экрана, а после "прыжка" всё становится нормальным.

[Константин Б.]

А как вы стили подключаете?

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

Константин Б.,
в nuxt.config.js

export default defineNuxtConfig({
  css: ['vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css'],
  build: {
    transpile: ['vuetify'],
  },
})