https://github.com/ZhongxuYang/vitepress-plugin-nprogress

nprogress plugin for vitepress
https://github.com/ZhongxuYang/vitepress-plugin-nprogress

nprogress vitepress-plugin

Last synced: about 2 months ago
JSON representation

nprogress plugin for vitepress

• Host: GitHub
• URL: https://github.com/ZhongxuYang/vitepress-plugin-nprogress
• Owner: ZhongxuYang
• Created: 2022-10-02T10:11:21.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2022-10-17T09:32:28.000Z (about 2 years ago)
• Last Synced: 2024-04-10T15:06:15.041Z (8 months ago)
• Topics: nprogress, vitepress-plugin
• Language: CSS
• Homepage:
• Size: 43 KB
• Stars: 12
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-vitepress-v1 - Progress Bar with NProgress - Display slim progress bar like on YouTube, Medium, etc with [NProgress](https://github.com/rstacruz/nprogress) (:electric_plug: Plugins / Community Plugins)

README

        
# vitepress-plugin-nprogress

> Nprogress plugin for Vitepress



  

  

  



## Install

```sh

yarn add -D vitepress-plugin-nprogress

# OR npm install -D vitepress-plugin-nprogress

```

## Usage

```ts

// .vitepress/theme/index.ts

import DefaultTheme from "vitepress/theme"

import vitepressNprogress from 'vitepress-plugin-nprogress'

import 'vitepress-plugin-nprogress/lib/css/index.css'

export default {

  ...DefaultTheme,

  enhanceApp: (ctx) => {

    vitepressNprogress(ctx)

  }

}

```

## Tips

If got `TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".css" for ***/node_modules/nprogress/nprogress.css` error when you build, 

you can config like this in your `vite.config.ts`:

```ts

// vite.config.ts

import {defineConfig} from 'vite'

export default defineConfig({

  ssr: {

    noExternal: ['vitepress-plugin-nprogress']

  },

})

```

Then you can use `nprogress` ! 🎉