最完美的Nuxt3配置nprogress教程

先安装再配置哦：pnpm add nprogress或npm或其他

第一步：在plugins目录下新建一个 router-nprogress.ts 文件

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

/*配置加载*/
NProgress.configure({
    easing: 'ease-in', // 动画方式
    speed: 500, // 递增进度条的速度
    showSpinner: false, // 是否显示加载ico
    trickleSpeed: 200, // 自动递增间隔
    minimum: 0.4,// 初始化时的最小百分比,
});

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

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

第二步：在nuxt.config.ts中导入配置，并设置在客户端加载

plugins: [
  { src: '~/plugins/router-nprogress.ts', mode: 'client'}
],

第三步：自定义进度条样式，在全局样式中配置，如何没有则新建main.css或main.scss，复制以下代码自行修改调整

/*进度条颜色*/
#nprogress .bar {
  height: 4px !important; /* 设置进度条的高度 */
  background-color: rgba(0, 0, 0, 0.48) !important; //自定义颜色
}

然后在nuxt.config.ts中导入全局样式

css: [
  "@/assets/main.scss"
  ]
  

然后就ok啦~