如何在 Nuxt3 中检测用户设备并相应加载 UI

Question

我正在从事 Nuxt3 项目。我想为桌面版和移动版使用不同的布局。在某些页面上，一些不同的组件或块取决于设备。

例如，这是布局文件夹中的 default.vue

<template>

<!-- Mobile Layout -->
  <div v-if="$isMobile()">
    <TopMenu />
    <NuxtChild />
    <Footer />
  </div>
<!-- Mobile Layout End -->


<!-- Desktop Layout -->
  <a-layout has-sider v-else>
    <a-layout-sider
      :style="{
        background: '#ffffff',
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
        top: 0,
        bottom: 0,
      }"
      :class="`ttc-invisible sm:ttc-visible`"
    >
      <MainMenu />
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '202px', background: '#ffffff' }">
      <a-layout-header
        :class="`ttc-container ttc-mx-auto`"
        :style="{
          background: '#ffffff',
          padding: 0,
          position: 'fixed',
          zIndex: 1,
          width: '100%',
          padding: '5px 25px!important',
        }"
      >
        <TopMenu />
      </a-layout-header>
      <a-layout-content
        :style="{
          margin: '24px 16px 0',
          overflow: 'initial',
          padding: '50px 0px 35px 0px',
        }"
      >
        <NuxtChild />
      </a-layout-content>
      <a-layout-footer
        :style="{ padding: '24px 0px 0px 0px', background: '#ffffff' }"
      >
        <Footer />
      </a-layout-footer>
    </a-layout>
  </a-layout>
<!-- Desktop Layout End -->
</template>

我正在尝试学习在 Nuxt3 中编写自定义插件。这是我尝试使用移动检测库创建的内容。

插件文件夹内的device.js

import { defineNuxtPlugin } from '#app';
import MobileDetect from 'mobile-detect';

export default defineNuxtPlugin(() => {
    let headers = useRequestHeaders()
    const md = new MobileDetect(headers['user-agent'])
    const isMobile = md.phone() !== null || md.mobile() === 'UnknownMobile'
    const isTablet = md.tablet() !== null || md.mobile() === 'UnknownTablet'
    const isDesktop = !isMobile && !isTablet

    return {
        provide: {
            isMobile: () => isMobile,
            isTablet: () => isTablet,
            isDesktop: () => isDesktop
        },
    };
})

我收到这个错误。

runtime-core.esm-bundler.js:571 TypeError: _ctx.$isMobile is not a function
at Proxy._sfc_render (default.vue?import&t=1656113644025:25:16)
at renderComponentRoot (runtime-core.esm-bundler.js:896:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5651:34)
at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)
at instance.update (runtime-core.esm-bundler.js:5694:56)
at runtime-core.esm-bundler.js:493:18
at Array.forEach (<anonymous>)
at rerender (runtime-core.esm-bundler.js:485:27)
at Object.rerender (runtime-core.esm-bundler.js:568:20)
at default.vue?import&t=1656113612067:98:25

更新

突然错误消失了，我可以检查 $isMobile、$isDesktop 的响应是否正确。

但是当我在移动设备中浏览时，它首先加载移动布局，然后突然返回到桌面布局。

如何解决这个问题

Answer 1

解决了问题。在plugins/device.js 中，关键是：

const md = process.server ? new MobileDetect(headers['user-agent']) : new MobileDetect(navigator.userAgent)

毕竟：

为了处理 Nuxt3 (SSR) 中的移动/桌面布局，我们可以使用 userAgent 定义浏览器类型，然后使用 mobile-detect 库定义设备类型 ( https://www.npmjs.com/package/mobile-detect )

安装npm i mobile-detect

yourApp/plugins/device.js：

const md = process.server ? new MobileDetect(headers['user-agent']) : new MobileDetect(navigator.userAgent)

用法：

<template>
  <div v-if="$isMobile()" > show on mobile </div>
</template>