如何根据屏幕尺寸结合 vue/nuxt 中的 ssr 有条件地正确渲染 html
How to properly render html conditionally based on screen size in conjunction with ssr in vue/nuxt
假设我要通过 v-if 只为桌面呈现标记。
如果它是移动的，它应该呈现 v-else 的东西。
我正在使用 vue-mq 包，它允许设置应该用于服务器端渲染的默认断点。
当我将 'sm' 放在那里并从桌面加载页面时，浏览器显然首先收到网站的 'sm' 版本，这可能与 'lg' 版本不同。
因此导致控制台中显示不匹配。
在 nuxt/vuejs 中有条件地呈现 ssr html 内容的正确方法是什么？
关于如何在不让用户加载两个版本的标记的情况下正确解决这个问题的任何想法（比如使用 v-show 而不是 v-if 解决了不匹配但确实增加了带宽使用）？
非常感谢任何帮助。
谢谢！
你想要@nuxtjs/device。当一个 http 请求到达您的 Nuxt 应用程序时，此模块会检查用户代理 header 并确定用户代理（即发出请求的设备）是移动设备、平板电脑还是台式机等。发生这种情况服务器端，在您的客户端代码执行之前，因此模板中的 v-if 将得到正确处理。
例如：
v-if="$device.isMobile"
假设我要通过 v-if 只为桌面呈现标记。
如果它是移动的，它应该呈现 v-else 的东西。
我正在使用 vue-mq 包，它允许设置应该用于服务器端渲染的默认断点。
当我将 'sm' 放在那里并从桌面加载页面时，浏览器显然首先收到网站的 'sm' 版本，这可能与 'lg' 版本不同。
因此导致控制台中显示不匹配。
在 nuxt/vuejs 中有条件地呈现 ssr html 内容的正确方法是什么？
关于如何在不让用户加载两个版本的标记的情况下正确解决这个问题的任何想法（比如使用 v-show 而不是 v-if 解决了不匹配但确实增加了带宽使用）？
非常感谢任何帮助。
谢谢！
你想要@nuxtjs/device。当一个 http 请求到达您的 Nuxt 应用程序时，此模块会检查用户代理 header 并确定用户代理（即发出请求的设备）是移动设备、平板电脑还是台式机等。发生这种情况服务器端，在您的客户端代码执行之前，因此模板中的 v-if 将得到正确处理。
例如：
v-if="$device.isMobile"