diff --git a/packages/@vuepress/plugin-nprogress/.npmignore b/packages/@vuepress/plugin-nprogress/.npmignore
new file mode 100644
index 0000000000..18f0a334a4
--- /dev/null
+++ b/packages/@vuepress/plugin-nprogress/.npmignore
@@ -0,0 +1,2 @@
+__tests__
+__mocks__
\ No newline at end of file
diff --git a/packages/@vuepress/plugin-nprogress/README.md b/packages/@vuepress/plugin-nprogress/README.md
new file mode 100644
index 0000000000..de7b990304
--- /dev/null
+++ b/packages/@vuepress/plugin-nprogress/README.md
@@ -0,0 +1,3 @@
+# @vuepress/plugin-nprogress
+
+> nprogress plugin for vuepress
\ No newline at end of file
diff --git a/packages/@vuepress/plugin-nprogress/clientRootMixin.js b/packages/@vuepress/plugin-nprogress/clientRootMixin.js
new file mode 100644
index 0000000000..11512c5b4c
--- /dev/null
+++ b/packages/@vuepress/plugin-nprogress/clientRootMixin.js
@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import nprogress from 'nprogress'
+
+export default {
+  mounted () {
+    // configure progress bar
+    nprogress.configure({ showSpinner: false })
+
+    this.$router.beforeEach((to, from, next) => {
+      if (to.path !== from.path && !Vue.component(to.name)) {
+        nprogress.start()
+      }
+      next()
+    })
+
+    this.$router.afterEach(() => {
+      nprogress.done()
+      this.isSidebarOpen = false
+    })
+  }
+}
diff --git a/packages/@vuepress/plugin-nprogress/enhanceAppFile.js b/packages/@vuepress/plugin-nprogress/enhanceAppFile.js
new file mode 100644
index 0000000000..c2a0cac4d2
--- /dev/null
+++ b/packages/@vuepress/plugin-nprogress/enhanceAppFile.js
@@ -0,0 +1 @@
+import './nprogress.styl'
diff --git a/packages/@vuepress/plugin-nprogress/index.js b/packages/@vuepress/plugin-nprogress/index.js
new file mode 100644
index 0000000000..326c3cde3b
--- /dev/null
+++ b/packages/@vuepress/plugin-nprogress/index.js
@@ -0,0 +1,6 @@
+const { resolve } = require('path')
+
+module.exports = {
+  clientRootMixin: resolve(__dirname, 'clientRootMixin.js'),
+  enhanceAppFiles: resolve(__dirname, 'enhanceAppFile.js')
+}
diff --git a/packages/@vuepress/theme-default/styles/nprogress.styl b/packages/@vuepress/plugin-nprogress/nprogress.styl
similarity index 100%
rename from packages/@vuepress/theme-default/styles/nprogress.styl
rename to packages/@vuepress/plugin-nprogress/nprogress.styl
diff --git a/packages/@vuepress/plugin-nprogress/package.json b/packages/@vuepress/plugin-nprogress/package.json
new file mode 100644
index 0000000000..b2966e442e
--- /dev/null
+++ b/packages/@vuepress/plugin-nprogress/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "@vuepress/plugin-nprogress",
+  "version": "1.0.0-alpha.30",
+  "description": "nprogress plugin for vuepress",
+  "main": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuejs/vuepress.git"
+  },
+  "keywords": [
+    "documentation",
+    "vue",
+    "vuepress",
+    "generator"
+  ],
+  "dependencies": {
+    "nprogress": "^0.2.0"
+  },
+  "author": "ULIVZ <chl814@foxmail.com>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/vuejs/vuepress/issues"
+  },
+  "homepage": "https://github.com/vuejs/vuepress/packages/@vuepress/plugin-nprogress#readme"
+}
diff --git a/packages/@vuepress/theme-default/index.js b/packages/@vuepress/theme-default/index.js
index a095279646..dd28d69bc1 100644
--- a/packages/@vuepress/theme-default/index.js
+++ b/packages/@vuepress/theme-default/index.js
@@ -19,6 +19,7 @@ module.exports = (options, ctx) => ({
 
   plugins: [
     '@vuepress/active-header-links',
-    '@vuepress/search'
+    '@vuepress/search',
+    '@vuepress/plugin-nprogress'
   ]
 })
diff --git a/packages/@vuepress/theme-default/layouts/Layout.vue b/packages/@vuepress/theme-default/layouts/Layout.vue
index 090fd64494..de6a0f60ec 100644
--- a/packages/@vuepress/theme-default/layouts/Layout.vue
+++ b/packages/@vuepress/theme-default/layouts/Layout.vue
@@ -48,8 +48,6 @@
 </template>
 
 <script>
-import Vue from 'vue'
-import nprogress from 'nprogress'
 import Home from '../components/Home.vue'
 import Navbar from '../components/Navbar.vue'
 import Page from '../components/Page.vue'
@@ -115,18 +113,7 @@ export default {
   },
 
   mounted () {
-    // configure progress bar
-    nprogress.configure({ showSpinner: false })
-
-    this.$router.beforeEach((to, from, next) => {
-      if (to.path !== from.path && !Vue.component(to.name)) {
-        nprogress.start()
-      }
-      next()
-    })
-
     this.$router.afterEach(() => {
-      nprogress.done()
       this.isSidebarOpen = false
     })
   },
diff --git a/packages/@vuepress/theme-default/package.json b/packages/@vuepress/theme-default/package.json
index 700dacef99..e47d58c107 100644
--- a/packages/@vuepress/theme-default/package.json
+++ b/packages/@vuepress/theme-default/package.json
@@ -31,8 +31,8 @@
   "dependencies": {
     "@vuepress/plugin-active-header-links": "^1.0.0-alpha.30",
     "@vuepress/plugin-search": "^1.0.0-alpha.30",
+    "@vuepress/plugin-nprogress": "^1.0.0-alpha.30",
     "docsearch.js": "^2.5.2",
-    "nprogress": "^0.2.0",
     "stylus": "^0.54.5",
     "stylus-loader": "^3.0.2"
   }
diff --git a/packages/@vuepress/theme-default/styles/theme.styl b/packages/@vuepress/theme-default/styles/theme.styl
index c807153527..1f552a3ed3 100644
--- a/packages/@vuepress/theme-default/styles/theme.styl
+++ b/packages/@vuepress/theme-default/styles/theme.styl
@@ -1,4 +1,3 @@
-@require './nprogress'
 @require './code'
 @require './custom-blocks'
 @require './arrow'