如何在Nuxt 3应用程序中添加页面加载器

方法一：使用内置的<NuxtLoadingIndicator>组件 #

这是最快捷的实现方式，Nuxt 3内置了加载指示器组件，直接引入即可使用。

1. 在app.vue中添加组件：

<template>
  <NuxtLoadingIndicator />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

2. 自定义配置（可选）
   在nuxt.config.ts中可以调整加载器的样式、动画等：

export default defineNuxtConfig({
  app: {
    loadingIndicator: {
      name: 'circle', // 可选动画：circle、dots、pulse等
      color: '#3B82F6',
      background: '#FFFFFF',
      height: '3px' // 进度条高度（如果是条形动画）
    }
  }
})

方法二：自定义加载器（适合个性化需求） #

如果需要完全自定义加载器的样式和行为，可以通过监听Nuxt的导航事件实现：

1. 创建加载器组件components/LoadingSpinner.vue

<template>
  <div v-show="isLoading" class="loading-overlay">
    <div class="spinner"></div>
  </div>
</template>

<script setup>
const isLoading = ref(true)

// 监听Nuxt页面加载事件
useRouter().beforeEach(() => {
  isLoading.value = true
})

useRouter().afterEach(() => {
  // 加延迟避免加载过快导致闪烁
  setTimeout(() => {
    isLoading.value = false
  }, 300)
})
</script>

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

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

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

2. 在app.vue中引入该组件

<template>
  <LoadingSpinner />
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

注意事项 #

• 自定义加载器中，beforeEach和afterEach路由钩子会在每次页面导航时触发，确保加载器在页面切换时显示/隐藏。
• 可以根据需求调整加载器的样式、动画时长，或者添加文本提示。

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