Nuxt 3 中怎么自定义全局 loading 样式不生效？

宇文怡轩提问于 2026-03-11 03:20:26 阅读 13

框架

我在 Nuxt 3 项目里想自定义页面切换时的 loading 条，但改了 CSS 好像没反应。官方文档说加个 .nuxt-progress 类就行，但我试了没效果，是写法不对吗？

我目前在 app.vue 同级目录下建了 assets/css/loading.css，并在 nuxt.config.ts 里引入了。样式如下：

.nuxt-progress {
  height: 4px !important;
  background-color: #007aff !important;
  box-shadow: 0 0 8px rgba(0, 122, 255, 0.6);
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 9999 !important;
}

但页面加载时还是默认的灰色细条，完全没变。是不是 Nuxt 3 的 loading 机制改了？

我来解答赞 12 收藏

反馈

1 条解答

极客英瑞 Lv1

Nuxt 3 的 loading 确实需要手动启用，光写 CSS 是不够的。

在 nuxt.config.ts 里这样配置：

export default defineNuxtConfig({

  app: {

    loading: {

      color: '#007aff',

      height: '4px'

    }

  }

})

这样启用后，你的 CSS 样式就会生效了。配置项支持 color、height、failedColor、duration 这些常用属性。

如果你想用更灵活的方式，也可以自定义 loading 组件。在 components 目录下创建 app-loading.vue，然后在配置里指向它：

export default defineNuxtConfig({

  app: {

    loading: '~/components/app-loading.vue'

  }

})

这样就能完全控制 loading 的外观和行为。

顺带一提，Nuxt 3 的页面过渡和 loading 是两套东西。如果你想同时自定义页面切换的过渡效果，可以在 app.vue 同级目录下建 app.css 然后在 nuxt.config.ts 引入：

export default defineNuxtConfig({

  css: ['~/assets/css/app.css']

})

然后在 CSS 里加过渡样式：

.page-enter-active,

.page-leave-active {

  transition: all 0.3s;

}

.page-enter-from,

.page-leave-to {

  opacity: 0;

}

2026-03-11 04:02