如何在Nuxt 3应用中实现自定义全屏加载Spinner？是否有预留组件？

Nuxt.js 没有像404页面那样的「预留加载组件」，但可以通过以下两种简单方式实现自定义全屏加载Spinner：

方法一：利用Nuxt内置的Loading配置（推荐，自动适配页面切换） #

这种方式会让Nuxt在页面跳转、数据预加载时自动控制加载组件的显示/隐藏，无需手动管理状态。

1. 创建自定义加载组件
   在项目的components目录下新建FullScreenLoader.vue，写一个全屏覆盖的Spinner样式：

<template>
  <div class="loader-wrapper" v-if="loading">
    <div class="spinner"></div>
  </div>
</template>

<script>
export default {
  props: ['loading'] // Nuxt会自动传入这个布尔值控制显示
}
</script>

<style scoped>
.loader-wrapper {
  position: fixed;
  inset: 0;
  background-color: rgba(255, 255, 255, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #e5e7eb;
  border-top-color: #3b82f6;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
</style>

2. 在Nuxt配置中注册组件
   打开nuxt.config.js（Nuxt3是nuxt.config.ts），添加loading配置指向你的自定义组件：

// Nuxt2
export default {
  loading: '@/components/FullScreenLoader.vue'
}

// Nuxt3
export default defineNuxtConfig({
  app: {
    loadingComponent: '@/components/FullScreenLoader.vue'
  }
})

配置完成后，页面切换时Nuxt会自动触发这个组件的显示和隐藏。

方法二：手动控制加载状态（适合自定义触发场景） #

如果需要在特定操作（比如接口请求、数据初始化）时显示加载器，可以手动管理状态：

1. 复用上面的FullScreenLoader.vue组件
2. 在页面/布局中引入并控制状态

<template>
  <div>
    <FullScreenLoader :loading="isLoading" />
    <div v-if="!isLoading" class="page-content">
      <!-- 页面内容 -->
      <h1>我的页面</h1>
    </div>
  </div>
</template>

<script>
// Nuxt2写法
import FullScreenLoader from '@/components/FullScreenLoader.vue'

export default {
  components: { FullScreenLoader },
  data() {
    return {
      isLoading: true
    }
  },
  async asyncData() {
    // 模拟接口请求
    await new Promise(resolve => setTimeout(resolve, 2000))
    return { isLoading: false }
  }
}

// Nuxt3 <script setup>写法
// import FullScreenLoader from '@/components/FullScreenLoader.vue'
// const isLoading = ref(true)
//
// onMounted(async () => {
//   await new Promise(resolve => setTimeout(resolve, 2000))
//   isLoading.value = false
// })
</script>

Nuxt3额外说明 #

如果用Nuxt3，还可以通过useLoading组合式API更灵活地控制加载状态：

<template>
  <FullScreenLoader :loading="loading.isLoading" />
</template>

<script setup>
const loading = useLoading()

// 手动启动/结束加载
loading.start()
setTimeout(() => loading.finish(), 3000)
</script>

内容的提问来源于stack exchange，提问作者NyF__