docs: improvements (#429)

README.md

@@ -1,16 +1,32 @@
-# 📦 Axios Module
+[![@nuxtjs/axios](https://axios.nuxtjs.org/preview.png)](https://axios.nuxtjs.org)
 
+# @nuxtjs/axios
 
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![Checks][checks-src]][checks-href]
+[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
 [![Codecov][codecov-src]][codecov-href]
+[![License][license-src]][license-href]
 
-> Secure and Easy <a href="https://github.com/mzabriskie/axios">Axios</a> integration with Nuxt.js
+> Secure and easy [Axios](https://github.com/axios/axios) integration for [Nuxt](https://nuxtjs.org).
 
-📖 [**Read Documentation**](https://axios.nuxtjs.org)
+- [✨ &nbsp;Release Notes](https://axios.nuxtjs.org/releases)
+- [📖 &nbsp;Documentation](https://axios.nuxtjs.org)
 
-## Development
+## Features
+
+- Automatically set base URL for client & server side
+- Exposes `setToken` function to `$axios` so we can easily and globally set authentication tokens
+- Automatically enables `withCredentials` when requesting to base URL
+- Proxy request headers in SSR
+- Fetch Style requests
+- Integrated with Nuxt progress bar
+- Integrated with Proxy Module
+- Auto retry requests with axios-retry
+
+[📖 &nbsp;Read more](https://axios.nuxtjs.org)
+
+## Contributing
 
 1. Clone this repository
 2. Install dependencies using `yarn install` or `npm install`
@@ -26,9 +42,15 @@ Copyright (c) Nuxt Community
 <!-- Badges -->
 [npm-version-src]: https://flat.badgen.net/npm/v/@nuxtjs/axios
 [npm-version-href]: https://npmjs.com/package/@nuxtjs/axios
+
 [npm-downloads-src]: https://flat.badgen.net/npm/dm/@nuxtjs/axios
 [npm-downloads-href]: https://npmjs.com/package/@nuxtjs/axios
-[checks-src]: https://flat.badgen.net/github/checks/nuxt-community/axios-module/dev
-[checks-href]: https://github.com/nuxt-community/axios-module/actions
+
+[github-actions-ci-src]: https://github.com/nuxt-community/axios-module/workflows/ci/badge.svg
+[github-actions-ci-href]: https://github.com/nuxt-community/axios-module/actions?query=workflow%3Aci
+
 [codecov-src]: https://flat.badgen.net/codecov/c/github/nuxt-community/axios-module
 [codecov-href]: https://codecov.io/gh/nuxt-community/axios-module
+
+[license-src]: https://img.shields.io/npm/l/@nuxtjs/axios.svg
+[license-href]: https://npmjs.com/package/@nuxtjs/axios

docs/.gitignore

@@ -7,3 +7,4 @@ node_modules
 .DS_Store
 coverage
 dist
+sw.js

docs/content/en/extend.md

@@ -1,30 +1,23 @@
 ---
-title: 'Extending Axios'
-description: ''
+title: 'Extending axios'
+description: 'Learn how to extend the axios module for Nuxt'
 position: 5
-category: 'Extending Axios'
+category: 'API'
 ---
 
+## Adding interceptors
 
 If you need to customize axios by registering interceptors and changing global config, you have to create a nuxt plugin.
 
-**nuxt.config.js**
-
-```js
-{
-  modules: [
-    '@nuxtjs/axios',
-  ],
-
+```js{}[nuxt.config.js]
+export default {
   plugins: [
     '~/plugins/axios'
   ]
 }
 ```
 
-**plugins/axios.js**
-
-```js
+```js{}[plugins/axios.js]
 export default function ({ $axios, redirect }) {
   $axios.onRequest(config => {
     console.log('Making request to ' + config.url)
@@ -39,11 +32,18 @@ export default function ({ $axios, redirect }) {
 }
 ```
 
-### Create new axios instance based on defaults
+<alert type="info">
+
+Learn more about [$axios's helpers](/helpers).
 
-If you need to create your own axios instance which based on $axios defaults, you can use `create` method.
 
-```js
+</alert>
+
+## New axios instance
+
+If you need to create your own axios instance which based on `$axios` defaults, you can use the `create` method.
+
+```js{}[plugins/api.js]
 export default function ({ $axios }, inject) {
   // Create a custom axios instance
   const api = $axios.create({
@@ -61,3 +61,5 @@ export default function ({ $axios }, inject) {
   inject('api', api)
 }
 ```
+
+Learn about [$axios's helpers](/helpers).

docs/content/en/helpers.md

@@ -1,10 +1,11 @@
 ---
 title: 'Helpers'
-description: ''
+description: 'Discover the helpers to supercharge your Axios instance'
 position: 6
-category: 'Helpers'
+category: 'API'
 ---
 
+Discover the helpers to supercharge your axios instance.
 
 ## Interceptors
 
@@ -30,6 +31,12 @@ export default function ({ $axios, redirect }) {
 }
 ```
 
+<alert type="info">
+
+Learn more about [extending axios](/extend)
+
+</alert>
+
 ## `setBaseURL`
 
 - Signature: `setBaseURL(baseURL)`

docs/content/en/index.md

@@ -1,36 +1,47 @@
 ---
 title: 'Introduction'
-description: ''
+description: 'The Axios module for Nuxt'
 position: 1
-category: 'Getting started'
-menuTitle: 'Intro'
+category: ''
+menuTitle: 'Introduction'
 features:
   - Automatically set base URL for client & server side
   - Exposes `setToken` function to `$axios` so we can easily and globally set authentication tokens
   - Automatically enables `withCredentials` when requesting to base URL
-  - Proxy request headers in SSR (Useful for auth)
+  - Proxy request headers in SSR
   - Fetch Style requests
-  - Integrated with Nuxt.js Progressbar while making requests
+  - Integrated with Nuxt progress bar
   - Integrated with Proxy Module
   - Auto retry requests with axios-retry
 ---
 
+<img src="/preview.png" class="light-img" width="1280" height="640" alt="Nuxt Axios"/>
+<img src="/preview-dark.png" class="dark-img" width="1280" height="640" alt="Nuxt Axios"/>
+
+Secure and easy [Axios](https://github.com/axios/axios) integration for [Nuxt](https://nuxtjs.org).
+
 ## Features
 
 <list :items="features"></list>
 
-> Secure and Easy [Axios](https://github.com/axios/axios) integration with Nuxt.js.
+<p class="flex items-center">Enjoy light and dark mode:&nbsp;<app-color-switcher class="inline-flex ml-2"></app-color-switcher></p>
+
+## Logo
+
+Axios does not have an official module yet, we decided to use the actual proposal submitted here: https://github.com/axios/axios/issues/2130
 
 ## Links
 
 * [GitHub](https://github.com/nuxt-community/axios-module)
 * [Release Notes](/releases)
-* [Migration Guide](migration)
-* [Examples](https://axios.nuxtjs.org/usage.html)
+* [Migration Guide](/migration)
+
+<alert type="info">
+
+To get started head to [Setup](/setup) section.
 
-> 👉 To get started head to [Setup](/setup) section.
+</alert>
 
 ## Online courses
 
-<promote-block>
-</promote-block>
+<promote-block></promote-block>

docs/content/en/migration.md

@@ -1,11 +1,10 @@
 ---
 title: 'Migration guides'
-description: ''
+description: 'Migrate with confidence from one major version to another with our migrations guides.'
 position: 7
 category: 'Migration'
 ---
 
-
 ### From 4.x to 5.x
 
 **BaseURL options and handling have been completely rewritten.**

docs/content/en/options.md

@@ -1,37 +1,21 @@
 ---
 title: 'Options'
-description: ''
+description: 'Discover the available options to configure Axios in Nuxt'
 position: 4
 category: 'Getting started'
 ---
 
-You can pass different options using module inline options:
+You can pass different options using the `axios` property in your `nuxt.config.js`:
 
-```js
-export default {
-  modules: [
-    ['@nuxtjs/axios', { proxy: true }]
-  ]
-}
-```
-
-or `axios` section in `nuxt.config.js`:
-
-**nuxt.config.js**
-
-```js
+```js{}[nuxt.config.js]
 export default {
-  modules: [
-    '@nuxtjs/axios'
-  ],
-
   axios: {
-    proxy: true
-  },
+    // Axios options here
+  }
 }
 ```
 
-### Runtime Config
+## Runtime Config
 
 The use of [runtime config](https://nuxtjs.org/guide/runtime-config) is mandatory in case of using environment variables in production, otherwise, the values will be hard coded during build and won't change.
 

docs/content/en/setup.md

@@ -8,40 +8,62 @@ category: 'Getting started'
 
 ## Install
 
-Install with yarn:
+Add `@nuxtjs/axios` dependency to your project:
 
-```bash
-yarn add @nuxtjs/axios
-```
+<code-group>
+  <code-block label="Yarn" active>
+
+  ```bash
+  yarn add @nuxtjs/axios
+  ```
+
+  </code-block>
+  <code-block label="NPM">
 
-Install with npm:
+  ```bash
+  npm install @nuxtjs/axios
+  ```
 
-```bash
-npm install @nuxtjs/axios
+  </code-block>
+</code-group>
+
+Then at it to the `modules` section in your `nuxt.config.js`:
+
+```js{}[nuxt.config.js]
+export default {
+  modules: ['@nuxtjs/axios']
+}
 ```
 
-**nuxt.config.js**
+<alert type="success">
 
-```js
-module.exports = {
+That's it! You can now use [$axios](/usage) in your Nuxt app ✨
+
+</alert>
+
+## Configure
+
+Add an `axios` object to your `nuxt.config.js` to configure global options which will be applied to all requests:
+
+```js{}[nuxt.config.js]
+export default {
   modules: [
     '@nuxtjs/axios',
   ],
 
   axios: {
-    // proxyHeaders: false
+    // proxy: true
   }
 }
 ```
 
+Learn more about [axios's options](/options).
 
 ## TypeScript
 
-Add the types to your "types" array in tsconfig.json after the `@nuxt/types` (Nuxt 2.9.0+) or `@nuxt/vue-app` entry
-
-**tsconfig.json**
+Add the types to your "types" array in `tsconfig.json` after the `@nuxt/types` (Nuxt 2.9.0+) or `@nuxt/vue-app` entry
 
-```json
+```json{}[tsconfig.json]
 {
   "compilerOptions": {
     "types": [

docs/content/settings.json

@@ -1,4 +1,10 @@
 {
   "title": "Axios Module",
-  "github": "nuxt-community/axios-module"
+  "url": "https://axios.nuxtjs.org",
+  "logo": {
+    "light": "/logo-light.svg",
+    "dark": "/logo-dark.svg"
+  },
+  "github": "nuxt-community/axios-module",
+  "twitter": "@nuxt_js"
 }

docs/nuxt.config.js

@@ -1,18 +1,18 @@
 import theme from '@nuxt/content-theme-docs'
 
 export default theme({
-  loading: { color: '#00CD81' },
-  i18n: {
-    locales: () => [{
-      code: 'en',
-      iso: 'en-US',
-      file: 'en-US.js',
-      name: 'English'
-    }],
-    defaultLocale: 'en'
+  docs: {
+    primaryColor: '#AA7AB5'
   },
-  content: {
-    liveEdit: false
+  buildModules: ['nuxt-ackee'],
+  ackee: {
+    server: 'https://ackee.nuxtjs.com',
+    domainId: 'a1a834f9-be7a-45ca-a18e-4ab559cd8452',
+    detailed: true
   },
-  components: true
+  pwa: {
+    manifest: {
+      name: 'Nuxt Axios'
+    }
+  }
 })