在初始 DOM 加载后添加 Vuetify 样式答案

【问题标题】：Vuetify styles being added after initial DOM load在初始 DOM 加载后添加 Vuetify 样式
【发布时间】：2021-06-28 11:11:07
【问题描述】：

我在"nuxt": "2.15.4"、"@nuxtjs/vuetify": "1.12.1" 和"sass": "1.32.13" 上，并在我的默认布局中添加了一个导航栏组件，该组件使用v-navigation-drawer，并且在页面加载的第一刻有一个闪烁和所有东西（抽屉）溅到屏幕上，然后加载 css。我已经阅读了nuxt-css-issue 这个并且有点理解这是因为 nuxt 和 vuetify 行为。那么有没有办法解决这个问题？？加载应用的时候真的很丑！！

哦，顺便说一句，我使用 nuxt 通用 ssr 并且 vuetify treeShake 是真的

【问题讨论】：

标签： vuejs2 nuxt.js vuetify.js

【解决方案1】：

因此，您要么等待 CSS 与 JS 一起出现（性能更好，但可能会有一些小的闪烁），要么在开始时全局加载所有 CSS，然后是 JS（在速度方面不太好，但没有闪烁）。我是否很好地理解了这个问题？

不确定这个问题是否有真正的解决方案，除了可能显示隐藏组件，直到他加载了@hook:mounted 钩子和v-show，完成后显示组件。更多信息在这里：https://stackoverflow.com/a/67535239/8816585

你在 Vuetify 的 github issues 上发现了什么吗？
不确定是否有可用的东西，请随时发布新问题。

PS：这里可能有一些恶作剧，在我们到达特定页面或某个钩子时预加载一些 CSS。不确定这如何可行，但了解 JS 生态系统，这种 hack 可能是可行的。

【讨论】：

css 是 vuetify 包的，我没有手动添加任何东西，所以我不知道它是否是全局添加的；但是 vuetify 自己添加了全局。问题在于我的 topnav 添加到默认布局中，所以基本上它是加载的第一件事。由于主要问题是侧边菜单女巫通过 v-model 绑定到数据，我使用 v-if 根本不显示，直到侧边菜单的值为 true。关于 github，已经在 nuxt/vuetify 上发布了一个问题
对不起，如果我不能提供更多帮助。是的，这也是一个问题，了解幕后发生的事情。非常适合 Github！
实际上v-if 解决了我的问题。我通过用我的纯 html/css 代码替换 vuetify 组件来重构我的代码；但是现在如果这需要太多时间，我会用你的技巧来安装钩子和 v-show