1

I'm on "nuxt": "2.15.4", "@nuxtjs/vuetify": "1.12.1" and "sass": "1.32.13" and have a navbar component added to my default layout that uses v-navigation-drawer and at first moment of page load there is a flicker and every thing (drawer) splashed on screen and after that css is loaded. I have read nuxt-css-issue this and kinda understand that it's because of nuxt and vuetify behaviour . so is there any way to solve this?? It's really ugly when you load the app !!

oh btw I use nuxt universal ssr and for vuetify treeShake is true

Mojtaba Barari
  • 1,127
  • 1
  • 15
  • 49

1 Answers1

1

So, you either wait for the CSS to come with the JS (better performance-wise, but may have some small flickering) or load all the CSS globally at the beginning, then the JS (less good in terms of speed, but no flicker). Do I understand the issue well?

Not sure if there is a real solution to this issue besides maybe display-hiding the component until he is loaded with a @hook:mounted hook and a v-show who is showing the component when done. More info here: https://stackoverflow.com/a/67535239/8816585

Did you found out something on Vuetify's github issues?
Not sure if there is something available yet, feel free to maybe post a new issue.

PS: there is maybe some shenanigan move here, to preload some CSS once we have reached a specific page or some hook. Not sure how would this be doable but knowing the JS ecosystem, this kind of hack may be feasable.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • 1
    the css is for vuetify package , i didn't add anything manually so i don't know if it's added globally or not ; but the vuetify added globally itself. the problem is with my topnav which is added to default layout , so basically it's the first thing loaded. As the main problem is with a side menu witch is bind to a data via `v-model` , I used `v-if` to don't show at all until the value for side menu is true. And about github, already posted an issue on nuxt/vuetify – Mojtaba Barari Jun 28 '21 at 16:25
  • Sorry if I can't help more. Yeah, this is also an issue, understanding what is happening behind the curtains. Nice for Github! – kissu Jun 28 '21 at 16:31
  • 1
    actually `v-if` solved my problem. I was refactoring my codes by replacing vuetify components with my pure html/css codes; but now if that takes too much times, i'll use your trick with mounted hook and v-show – Mojtaba Barari Jun 29 '21 at 06:40