基于视口有条件地渲染NuxtJS组件

Question

我想知道如何基于视口宽度有条件地渲染NuxtJs组件。

所以；

以传统的CSS方式，我们可以像这样：

<div class="isMobile">
<!-- mobile content -->
</div>

<div class="isDesktop">
<!-- desktop content -->
</div>

在这种情况下，此解决方案有效。

@media only screen and (max-width: 768px) {
  .isDesktop {display:none;}
  .isMobile {display:block}
}

但是使用此解决方案，无论如何，dom中都呈现了isDesktop和isMobile div。

我不想这样做：

  <div v-if="isMobile"></div>
    <div v-if="isDesktop"></div>

并在beforeMount组件中进行控制，或者如果用户将调整窗口大小，则可以进行控制。

我看到了一些类似[https://github.com/dotneet/nuxt-device-detect][1]的插件 但对我而言，没有自述文件。

有人有什么建议吗？

Answer 1

您无法从服务器检测视图宽度，因为...好吧...它是服务器。 nuxt-device-detect使用用户代理确定哪种设备正在请求页面，并根据该请求设置一些预定义的变量。

在$device.isMobile中使用$device.isDesktop和v-if将确保您仅服务于要为移动设备和桌面设备服务的DOM节点。但是，它不会响应于调整浏览器的大小。毕竟，检测是根据用户代理而不是视图宽度完成的。