Nuxt3（SSR关闭）移动端切换布局问题求助

开发者阿泽

2026-7-23

Nuxt3 关闭SSR后移动端切换布局问题解决

问题背景

创建了一个关闭SSR的Nuxt3应用，想要实现移动端自动切换布局，参考旧教程后操作不符合Nuxt3的API规范，导致出现警告。

现有代码

全局中间件 `middleware/mobile.global.ts`

export default function(context: { isMobile: boolean; }){
    let userAgent = navigator.userAgent;
    context.isMobile = /mobile/i.test(userAgent)
}

首页配置 `index.vue`

<script setup lang="ts">

definePageMeta({
    layout: ({isMobile}) =>  isMobile ? "mobile" : "default",
})

</script>

出现的警告

valid layout ({ isMobile }) => isMobile ? "mobile" : "default" selected.
翻译：已选择有效的布局 ({ isMobile }) => isMobile ? "mobile" : "default"

问题原因及修复方案

核心问题

Nuxt3的全局中间件API已更新，不再使用旧的context参数写法，且definePageMeta的布局函数无法直接获取自定义的isMobile变量。
参考的旧教程是针对Nuxt2的，写法不适用于Nuxt3。

修复方案一：直接在布局函数中判断（最简）

无需中间件，直接在index.vue的布局函数里做UA判断：

<script setup lang="ts">
definePageMeta({
  layout: () => {
    const isMobile = /mobile/i.test(navigator.userAgent)
    return isMobile ? "mobile" : "default"
  }
})
</script>

修复方案二：用中间件共享状态（适合多页面复用）

如果多个页面都需要判断移动端，推荐用中间件注入状态：

修改全局中间件 middleware/mobile.global.ts：

export default defineNuxtRouteMiddleware(() => {
  // 关闭SSR后仅在客户端执行，无需处理服务端逻辑
  const nuxtApp = useNuxtApp()
  nuxtApp.provide('isMobile', /mobile/i.test(navigator.userAgent))
})

在index.vue中使用注入的状态：

<script setup lang="ts">
definePageMeta({
  layout: () => {
    const { $isMobile } = useNuxtApp()
    return $isMobile ? "mobile" : "default"
  }
})
</script>