nuxt3中使用nprogress

下载依赖

npm i nprogress

npm i --save-dev @types/nprogress // 引入ts类型声明，未使用ts可不用

创建plugins文件夹

plugins目录下创建nprogress.client.ts文件（新版本nuxt3中目录顶层文件会自动注册 .client代表只在客户端执行）

import NProgress from 'nprogress';
import 'nprogress/nprogress.css';

//全局进度条的配置
NProgress.configure({
  easing: 'ease', // 动画方式
  speed: 200, // 递增进度条的速度
  showSpinner: false, // 是否显示加载ico
  trickleSpeed: 200, // 自动递增间隔
  minimum: 0.4, // 更改启动时使用的最小百分比
  parent: 'body', //指定进度条的父容器
});

export default defineNuxtPlugin(() => {
  useRouter().beforeEach(() => {
    NProgress.start();
  });

  useRouter().afterEach(() => {
    NProgress.done();
  });
});

如需自定义样式

#nprogress .bar {
  height: 4px !important;
}

加入到全局配置的css中

跑题

NUXT3中其实提供了进度条组件，可以自定义

文档在此