feat: integrate with nuxt progress bar

README.md

@@ -32,9 +32,18 @@
 
 If you are coming from an older release please be sure to read [Migration Guide](https://github.com/nuxt-community/axios-module/wiki/Migration-guide)
 
+## Features
+
+✓ Automatically set base URL for client & server side
+✓ Exposes `setToken` function to `$axios` so we can easily and globally set authentication tokens
+✓ Throws _nuxt-friendly_ errors and optionally redirect on specific error codes
+✓ Automatically enables `withCredentials` when requesting to base URL
+✓ Proxy request headers in SSR (Useful for auth)
+✓ Fetch Style requests
+✓ Automatically integrate with Nuxt.js progress bar
+
 # Table of Contents
 
-* [Features](#features)
 * [Setup](#setup)
 * [Usage](#usage)
   * [Component](#component)
@@ -50,33 +59,25 @@ If you are coming from an older release please be sure to read [Migration Guide]
   * [Prefix, Host and Port](#prefix-host-and-port)
   * [baseURL](#baseurl)
   * [browserBaseURL](#browserbaseurl)
+  * [progress](#progress)
   * [credentials](#credentials)
   * [debug](#debug)
   * [proxyHeaders](#proxyheaders)
   * [proxyHeadersIgnore](#proxyheadersignore)
   * [disableDefaultErrorHandler](#disabledefaulterrorhandler)
 
-## Features
-
-* Automatically set base URL for client & server side
-* Exposes `setToken` function to `$axios` so we can easily and globally set authentication tokens
-* Throws _nuxt-friendly_ errors and optionally redirect on specific error codes
-* Automatically enables `withCredentials` when requesting to base URL
-* Proxy request headers in SSR (Useful for auth)
-* Fetch Style requests
-
 ## Setup
 
 Install with yarn:
 
 ```bash
->_ yarn add @nuxtjs/axios
+yarn add @nuxtjs/axios
 ```
 
 Install with npm:
 
 ```bash
->_ npm install @nuxtjs/axios
+npm install @nuxtjs/axios
 ```
 
 **nuxt.config.js**
@@ -296,6 +297,12 @@ Base URL which is used and prepended to make requests in client side.
 
 Environment variable `API_URL_BROWSER` can be used to **override** `browserBaseURL`.
 
+### `progress`
+
+* Default: `true`
+
+Integrate with Nuxt.js progress bar to show a loading bar while making requests. (Only on browser, when loading bar is available.)
+
 ### `credentials`
 
 * Default: `false`

lib/module.js

@@ -38,6 +38,7 @@ module.exports = function nuxtAxios (_moduleOptions) {
       proxyMode: false,
       credentials: false,
       proxyHeaders: true,
+      progress: true,
       proxyHeadersIgnore: ['accept', 'host'],
       debug: false,
       disableDefaultErrorHandler: false

lib/plugin.template.js

@@ -72,8 +72,7 @@ const setupDebugInterceptor = axios => {
 
       return res
   })
-}
-<% } %>
+}<% } %>
 
 <% if (options.credentials) { %>
 const setupCredentialsInterceptor = axios => {
@@ -85,8 +84,51 @@ const setupCredentialsInterceptor = axios => {
       }
     }
   })
-}
-<% } %>
+}<% } %>
+
+<% if (options.progress) { %>
+const setupProgress = (axios, ctx) => {
+  if (process.server) {
+    return
+  }
+
+  // A noop loading inteterface for when $nuxt is not yet ready
+  const noopLoading = {
+    finish: () => { },
+    start: () => { },
+    fail: () => { },
+    set: () => { }
+  }
+
+  const $loading = () => window.$nuxt ? window.$nuxt.$loading : noopLoading
+
+  let currentRequests = 0
+
+  axios.onRequest(() => {
+    currentRequests++
+  })
+
+  axios.onResponse(() => {
+    currentRequests--
+    if (currentRequests <= 0) {
+      currentRequests = 0
+      $loading().finish()
+    }
+  })
+
+  axios.onError(() => {
+    currentRequests--
+    $loading().fail()
+  })
+
+  const onProgress = e => {
+    const progress = ((e.loaded * 100) / (e.total * currentRequests))
+    $loading().set(progress)
+  }
+
+  axios.defaults.onUploadProgress = onProgress
+  axios.defaults.onDownloadProgress = onProgress
+}<% } %>
 
 export default (ctx, inject) => {
   const axiosOptions = {
@@ -126,6 +168,7 @@ export default (ctx, inject) => {
   // Setup interceptors
   <% if (options.debug) { %>setupDebugInterceptor(axios) <% } %>
   <% if (options.credentials) { %>setupCredentialsInterceptor(axios)<% } %>
+  <% if (options.progress) { %>setupProgress(axios, ctx)<% } %>
 
   // Inject axios to the context as $axios
   ctx.$axios = axios