如何在Vue组件中检测是否运行于Nuxt 3环境或其他环境？

Nuxt 3不再像Nuxt 2那样自动向组件注入nuxt属性，需要通过以下几种方式检测当前环境：

1. 利用Nuxt 3内置API（推荐） #

通过useNuxtApp组合式函数和isNuxt2工具函数，可精准识别Nuxt环境及版本：

<script setup>
import { useNuxtApp, isNuxt2 } from '#app'

let isNuxtEnv = false
let isNuxt3 = false

try {
  // 尝试获取Nuxt应用实例，成功则为Nuxt环境
  const nuxtApp = useNuxtApp()
  isNuxtEnv = true
  // 区分Nuxt2和Nuxt3
  isNuxt3 = !isNuxt2(nuxtApp)
} catch (e) {
  // 调用失败，说明当前不是Nuxt环境
}

// 暴露变量给模板使用
defineExpose({ isNuxtEnv, isNuxt3 })
</script>

2. 客户端环境下检测全局对象 #

在浏览器端，可直接检查Nuxt注入的全局标识window.__NUXT__：

<script setup>
import { onMounted } from 'vue'

let isNuxtEnv = false
let isNuxt3 = false

onMounted(() => {
  if (typeof window !== 'undefined' && window.__NUXT__) {
    isNuxtEnv = true
    // 通过版本号判断是否为Nuxt3
    isNuxt3 = window.__NUXT__.version?.startsWith('3.') || false
  }
})
</script>

3. 环境变量检测 #

Nuxt会自动注入相关环境变量，可通过process.env直接判断：

<script setup>
const isNuxtEnv = typeof process !== 'undefined' && !!process.env.NUXT
const isNuxt3 = typeof process !== 'undefined' && process.env.NUXT_VERSION?.startsWith('3.')
</script>

适配你的组件的完整代码 #

结合上述检测方式，修改后的组件可兼容Nuxt 2、Nuxt 3及普通Vue项目：

<template>
  <nuxt-link v-if="isNuxtEnv && to" :to="to" class="base-button button-primary" :disabled="disabled">
    <slot/>
  </nuxt-link>
  <router-link v-else-if="to" :to="to" class="base-button" :disabled="disabled">
    <slot/>
  </router-link>
  <button v-else type="button" @click="$emit('click')" class="base-button" :disabled="disabled">
    <slot/>
  </button>
</template>

<script setup>
import { useNuxtApp, isNuxt2 } from '#app'
import { useRouter } from 'vue-router'

let isNuxtEnv = false

try {
  // 检测是否为Nuxt环境
  useNuxtApp()
  isNuxtEnv = true
} catch (e) {
  // 非Nuxt环境，尝试确认是否有vue-router（普通Vue项目）
  try {
    useRouter()
  } catch (e) {
    // 无路由环境，最终会渲染原生button
  }
}

// 定义组件props和事件
defineProps({
  to: {
    type: [String, Object],
    default: null
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

defineEmits(['click'])
</script>

补充说明 #

• Nuxt 3中nuxt-link仍是router-link的封装，无需单独区分Nuxt 2/3的链接组件，直接使用即可。
• 如果UI库需要支持服务端渲染和客户端渲染，推荐使用useNuxtApp的检测方式，兼容性更强。

内容的提问来源于stack exchange，提问作者Marian Klühspies