├── .editorconfig ├── .github └── workflows │ ├── codeql-analysis.yml │ └── npm-publish.yml ├── .gitignore ├── .npmignore ├── Gulpfile.js ├── LICENSE ├── README.md ├── SECURITY.md ├── examples ├── server.js ├── vue2 │ └── index.html ├── vue3-build │ ├── .gitignore │ ├── README.md │ ├── babel.config.js │ ├── package.json │ ├── src │ │ └── main.js │ └── yarn.lock └── vue3 │ ├── classic │ └── index.html │ └── composition │ └── index.html ├── index.d.ts ├── package-lock.json ├── package.json └── src └── index.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.github/workflows/codeql-analysis.yml: -------------------------------------------------------------------------------- 1 | # For most projects, this workflow file will not need changing; you simply need 2 | # to commit it to your repository. 3 | # 4 | # You may wish to alter this file to override the set of languages analyzed, 5 | # or to provide custom queries or build logic. 6 | # 7 | # ******** NOTE ******** 8 | # We have attempted to detect the languages in your repository. Please check 9 | # the `language` matrix defined below to confirm you have the correct set of 10 | # supported CodeQL languages. 11 | # 12 | name: "CodeQL" 13 | 14 | on: 15 | push: 16 | branches: [ master ] 17 | pull_request: 18 | # The branches below must be a subset of the branches above 19 | branches: [ master ] 20 | schedule: 21 | - cron: '18 0 * * 2' 22 | 23 | jobs: 24 | analyze: 25 | name: Analyze 26 | runs-on: ubuntu-latest 27 | permissions: 28 | actions: read 29 | contents: read 30 | security-events: write 31 | 32 | strategy: 33 | fail-fast: false 34 | matrix: 35 | language: [ 'javascript' ] 36 | # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ] 37 | # Learn more: 38 | # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed 39 | 40 | steps: 41 | - name: Checkout repository 42 | uses: actions/checkout@v2 43 | 44 | # Initializes the CodeQL tools for scanning. 45 | - name: Initialize CodeQL 46 | uses: github/codeql-action/init@v1 47 | with: 48 | languages: ${{ matrix.language }} 49 | # If you wish to specify custom queries, you can do so here or in a config file. 50 | # By default, queries listed here will override any specified in a config file. 51 | # Prefix the list here with "+" to use these queries and those in the config file. 52 | # queries: ./path/to/local/query, your-org/your-repo/queries@main 53 | 54 | # Autobuild attempts to build any compiled languages (C/C++, C#, or Java). 55 | # If this step fails, then you should remove it and run the build manually (see below) 56 | - name: Autobuild 57 | uses: github/codeql-action/autobuild@v1 58 | 59 | # ℹ️ Command-line programs to run using the OS shell. 60 | # 📚 https://git.io/JvXDl 61 | 62 | # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines 63 | # and modify them (or add more) to build your code if your project 64 | # uses a compiled language 65 | 66 | #- run: | 67 | # make bootstrap 68 | # make release 69 | 70 | - name: Perform CodeQL Analysis 71 | uses: github/codeql-action/analyze@v1 72 | -------------------------------------------------------------------------------- /.github/workflows/npm-publish.yml: -------------------------------------------------------------------------------- 1 | name: Node.js Package 2 | 3 | on: 4 | release: 5 | types: [created] 6 | 7 | jobs: 8 | build: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/checkout@v2 12 | - uses: actions/setup-node@v1 13 | with: 14 | node-version: 12 15 | - run: npm ci 16 | - run: npx gulp 17 | 18 | publish-npm: 19 | needs: build 20 | runs-on: ubuntu-latest 21 | steps: 22 | - uses: actions/checkout@v2 23 | - uses: actions/setup-node@v1 24 | with: 25 | node-version: 12 26 | registry-url: https://registry.npmjs.org/ 27 | - run: npm ci 28 | - run: npx gulp 29 | - run: npm publish 30 | env: 31 | NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}} 32 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Runtime data 7 | pids 8 | *.pid 9 | *.seed 10 | 11 | # Directory for instrumented libs generated by jscoverage/JSCover 12 | lib-cov 13 | 14 | # Coverage directory used by tools like istanbul 15 | coverage 16 | 17 | # nyc test coverage 18 | .nyc_output 19 | 20 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 21 | .grunt 22 | 23 | # node-waf configuration 24 | .lock-wscript 25 | 26 | # Compiled binary addons (http://nodejs.org/api/addons.html) 27 | build/Release 28 | 29 | # Dependency directories 30 | node_modules 31 | jspm_packages 32 | 33 | # Optional npm cache directory 34 | .npm 35 | 36 | # Optional REPL history 37 | .node_repl_history 38 | 39 | dist/ 40 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | examples 2 | -------------------------------------------------------------------------------- /Gulpfile.js: -------------------------------------------------------------------------------- 1 | // Gulp 2 | const gulp = require('gulp') 3 | const plumber = require('gulp-plumber') 4 | const file = require('gulp-file') 5 | const filter = require('gulp-filter') 6 | const uglify = require('gulp-uglify-es').default 7 | const clean = require('gulp-clean') 8 | const mergeStream = require('merge-stream') 9 | // Rollup 10 | const { rollup } = require('rollup') 11 | const { nodeResolve } = require('@rollup/plugin-node-resolve') 12 | const { getBabelOutputPlugin } = require('@rollup/plugin-babel') 13 | // Const 14 | const buildPath = 'dist/' 15 | 16 | /** 17 | * Generate scripts with commonjs module 18 | * @param {import('rollup').RollupBuild} bundle 19 | */ 20 | 21 | /** 22 | * Bundle index.js using rollup + babel 23 | */ 24 | async function bundle(name, format) { 25 | const bundle = await rollup({ 26 | input: 'src/index.js', 27 | plugins: [ 28 | nodeResolve({ browser: true }), 29 | getBabelOutputPlugin({ 30 | allowAllFormats: true, 31 | presets: [['@babel/preset-env', { modules: 'auto' }]], 32 | // sourceMaps: true, 33 | }), 34 | ], 35 | }) 36 | return bundle.generate({ 37 | format: format, 38 | name: name, 39 | }) 40 | } 41 | 42 | gulp.task('build', async function () { 43 | const esmbundle = await bundle('VueAxios', 'esm') 44 | const commonbundle = await bundle('VueAxios', 'umd') 45 | const f = filter(['*', '!**/*.js.map'], { restore: true }) 46 | const data = { 47 | 'vue-axios.common.min.js': commonbundle, 48 | 'vue-axios.esm.min.js': esmbundle, 49 | } 50 | var stream = mergeStream() 51 | 52 | for (const [name, bundle] of Object.entries(data)) { 53 | stream.add( 54 | file(name, bundle.output.map((o) => o.code).join(' '), { 55 | src: true, 56 | }) 57 | .pipe(plumber()) 58 | .pipe(f) 59 | .pipe(uglify()) 60 | .pipe(gulp.dest(buildPath)), 61 | ) 62 | } 63 | return stream; 64 | }) 65 | 66 | gulp.task('clean', function () { 67 | return gulp.src('dist/*').pipe( 68 | clean({ 69 | force: true, 70 | }), 71 | ) 72 | }) 73 | 74 | gulp.task('default', gulp.series('clean', 'build')) 75 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 Nguyen Quoc Anh 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-axios 2 | 3 | [![npm version](https://img.shields.io/npm/v/vue-axios.svg?style=flat-square)](https://www.npmjs.org/package/vue-axios) 4 | [![install size](https://packagephobia.now.sh/badge?p=vue-axios)](https://packagephobia.now.sh/result?p=vue-axios) 5 | [![npm downloads](https://img.shields.io/npm/dm/vue-axios.svg?style=flat-square)](http://npm-stat.com/charts.html?package=vue-axios) 6 | [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/vue-axios/badge?style=rounded)](https://www.jsdelivr.com/package/npm/vue-axios) 7 | [![License](https://img.shields.io/npm/l/vue-axios.svg)](https://www.npmjs.com/package/vue-axios) 8 | 9 | A small wrapper for integrating axios to Vuejs 10 | 11 | ## Why 12 | 13 | I created this library because, in the past, I needed a simple solution to migrate from `vue-resource` to `axios`. 14 | 15 | It only binds axios to the `vue` instance so you don't have to import everytime you use `axios`. 16 | 17 | ## How to install: 18 | ### ES6 Module: 19 | ```bash 20 | npm install --save axios vue-axios 21 | ``` 22 | Import libraries in entry file: 23 | ```js 24 | // import Vue from 'vue' // in Vue 2 25 | import * as Vue from 'vue' // in Vue 3 26 | import axios from 'axios' 27 | import VueAxios from 'vue-axios' 28 | ``` 29 | 30 | Usage in Vue 2: 31 | ```js 32 | Vue.use(VueAxios, axios) 33 | ``` 34 | 35 | Usage in Vue 3: 36 | ```js 37 | const app = Vue.createApp(...) 38 | app.use(VueAxios, axios) 39 | ``` 40 | 41 | ### Script: 42 | Just add 3 scripts in order: `vue`, `axios` and `vue-axios` to your `document`. 43 | 44 | ## Usage: 45 | 46 | ### in Vue 2 47 | 48 | This wrapper bind `axios` to `Vue` or `this` if you're using single file component. 49 | 50 | You can use `axios` like this: 51 | ```js 52 | Vue.axios.get(api).then((response) => { 53 | console.log(response.data) 54 | }) 55 | 56 | this.axios.get(api).then((response) => { 57 | console.log(response.data) 58 | }) 59 | 60 | this.$http.get(api).then((response) => { 61 | console.log(response.data) 62 | }) 63 | ``` 64 | 65 | ### in Vue 3 66 | 67 | This wrapper bind `axios` to `app` instance or `this` if you're using single file component. 68 | 69 | in option API, you can use `axios` like this: 70 | 71 | ```js 72 | // App.vue 73 | export default { 74 | name: 'App', 75 | methods: { 76 | getList() { 77 | this.axios.get(api).then((response) => { 78 | console.log(response.data) 79 | }) 80 | // or 81 | this.$http.get(api).then((response) => { 82 | console.log(response.data) 83 | }) 84 | } 85 | } 86 | } 87 | ``` 88 | 89 | however, in composition API `setup` we can't use `this`, you should use `provide` API to share the globally instance properties first, then use `inject` API to inject `axios` to `setup`: 90 | 91 | ```ts 92 | // main.ts 93 | import { createApp } from 'vue' 94 | import App from './App.vue' 95 | import store from './store' 96 | import axios from 'axios' 97 | import VueAxios from 'vue-axios' 98 | 99 | const app = createApp(App).use(store) 100 | app.use(VueAxios, axios) 101 | app.provide('axios', app.config.globalProperties.axios) // provide 'axios' 102 | app.mount('#app') 103 | 104 | // App.vue 105 | import { inject } from 'vue' 106 | 107 | export default { 108 | name: 'Comp', 109 | setup() { 110 | const axios: any = inject('axios') // inject axios 111 | 112 | const getList = (): void => { 113 | axios 114 | .get(api) 115 | .then((response: { data: any }) => { 116 | console.log(response.data) 117 | }); 118 | }; 119 | 120 | return { getList } 121 | } 122 | } 123 | ``` 124 | 125 | Please kindly check full documentation of [axios](https://github.com/axios/axios) too 126 | 127 | ## Multiple axios instances support 128 | 129 | The library allows to have different version of axios at the same time as well as change the default registration names (e.g. `axios` and `$http`). To use this feature you need to provide options like an object where: 130 | - `` is registration name 131 | - `` is instance of axios 132 | 133 | For Vue it looks like this: 134 | ```js 135 | // Vue 2 / Vue 3 + Composition API 136 | import App from './App.vue' 137 | import VueAxios from 'vue-axios' 138 | import axios from 'axios' 139 | import axios2 from 'axios' 140 | Vue.use(VueAxios, { $myHttp: axios, axios2: axios2 }) // or app.use() for Vue 3 Optiona API 141 | 142 | // usage 143 | export default { 144 | methods: { 145 | getList(){ 146 | this.$myHttp.get(api).then((response) => { 147 | console.log(response.data) 148 | }) 149 | this.axios2.get(api).then((response) => { 150 | console.log(response.data) 151 | }) 152 | } 153 | } 154 | } 155 | ``` 156 | It works similarly in Options API of Vue 3 but if you want to use Composition API you should adjust your code a bit to extract proper keys, e.g.: 157 | ```ts 158 | // Vue 2 + Setup function 159 | import { createApp } from 'vue' 160 | import App from './App.vue' 161 | import store from './store' 162 | import axios from 'axios' 163 | import VueAxios from 'vue-axios' 164 | 165 | const app = createApp(App).use(store) 166 | app.use(VueAxios, { $myHttp: axios, axios2: axios2 }) 167 | app.provide('$myHttp', app.config.globalProperties.$myHttp) // provide '$myHttp' 168 | app.provide('axios2', app.config.globalProperties.axios2) // provide 'axios2' 169 | app.mount('#app') 170 | 171 | // App.vue 172 | import { inject } from 'vue' 173 | 174 | export default { 175 | name: 'Comp', 176 | setup() { 177 | const $myHttp: any = inject('$myHttp') // inject $myHttp 178 | 179 | const getListWithMyHttp = (): void => { 180 | $myHttp 181 | .get(api) 182 | .then((response: { data: any }) => { 183 | console.log(response.data) 184 | }); 185 | }; 186 | 187 | const axios2: any = inject('axios2') // inject axios2 188 | const getListWithAxios2 = (): void => { 189 | axios2 190 | .get(api) 191 | .then((response: { data: any }) => { 192 | console.log(response.data) 193 | }); 194 | }; 195 | 196 | 197 | return { getListWithMyHttp, getListWithAxios2 } 198 | } 199 | } 200 | ``` 201 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Supported Versions 4 | 5 | | Version | Supported | 6 | | ------- | ------------------ | 7 | | 3.x.x | :white_check_mark: | 8 | | < 3.0 | :x: | 9 | 10 | ## Reporting a Vulnerability 11 | 12 | TBD 13 | -------------------------------------------------------------------------------- /examples/server.js: -------------------------------------------------------------------------------- 1 | const express = require('express') 2 | 3 | const app = express() 4 | 5 | const cors = { 6 | 'Access-Control-Allow-Origin': '*', 7 | 'Access-Control-Allow-Credentials': true, 8 | 'Access-Control-Allow-Methods': 'GET', 9 | 'Access-Control-Allow-Headers': 'Content-Type' 10 | } 11 | 12 | app.get('/greet', function (req, res) { 13 | res.set(cors) 14 | res.send("

Hello, Vue-Axios!

") 15 | }) 16 | 17 | app.listen(3000, () => console.log('Example app listening on port 3000!')) 18 | -------------------------------------------------------------------------------- /examples/vue2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue-Axios in Vue 2 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 |
18 |
19 | 20 | 21 | 22 | 23 | 24 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /examples/vue3-build/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /examples/vue3-build/README.md: -------------------------------------------------------------------------------- 1 | # vue3-build 2 | build empty vue project to check build size 3 | ## run build report to check build size 4 | ``` 5 | yarn build:report 6 | npm run build:report 7 | ``` 8 | and open report.html in dist file and then find vue-axios -------------------------------------------------------------------------------- /examples/vue3-build/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /examples/vue3-build/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue3-build", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "build:report": "vue-cli-service build --report" 9 | }, 10 | "dependencies": { 11 | "axios": "^1.6.0", 12 | "core-js": "^3.6.5", 13 | "vue": "^3.0.0" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.5.0", 17 | "@vue/cli-service": "~4.5.0", 18 | "@vue/compiler-sfc": "^3.0.0" 19 | }, 20 | "browserslist": [ 21 | "> 1%", 22 | "last 2 versions", 23 | "not dead" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /examples/vue3-build/src/main.js: -------------------------------------------------------------------------------- 1 | import { createApp } from 'vue' 2 | import Vueaxios from '../../../dist/vue-axios.esm.min' 3 | import axios from 'axios' 4 | createApp(App).use(Vueaxios, axios).mount('#app') 5 | -------------------------------------------------------------------------------- /examples/vue3/classic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue-Axios in Vue 3 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /examples/vue3/composition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vue-Axios in Vue 3 with Composition API 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /index.d.ts: -------------------------------------------------------------------------------- 1 | import { AxiosStatic } from "axios"; 2 | // @ts-ignore 3 | import { App } from "vue"; 4 | 5 | declare module "@vue/runtime-core" { 6 | export interface ComponentCustomProperties { 7 | $http: AxiosStatic; 8 | axios: AxiosStatic; 9 | } 10 | 11 | export interface App { 12 | axios: AxiosStatic; 13 | } 14 | } 15 | 16 | declare module 'vue/types/vue' { 17 | interface Vue { 18 | $http: AxiosStatic; 19 | axios: AxiosStatic; 20 | } 21 | 22 | interface VueConstructor { 23 | axios: AxiosStatic; 24 | } 25 | } 26 | 27 | declare function VueAxios(app: App, axios: AxiosStatic): void; 28 | 29 | export default VueAxios; 30 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-axios", 3 | "version": "3.5.2", 4 | "description": "A small wrapper for integrating axios to Vuejs", 5 | "main": "dist/vue-axios.esm.min.js", 6 | "types": "index.d.ts", 7 | "scripts": { 8 | "build": "gulp", 9 | "examples": "node examples/server.js" 10 | }, 11 | "typing": "index.d.ts", 12 | "files": [ 13 | "dist", 14 | "index.d.ts" 15 | ], 16 | "repository": { 17 | "type": "git", 18 | "url": "git+https://github.com/imcvampire/vue-axios.git" 19 | }, 20 | "keywords": [ 21 | "vue", 22 | "axios", 23 | "wrapper" 24 | ], 25 | "author": "Nguyen Quoc Anh (imcvampire)", 26 | "license": "MIT", 27 | "bugs": { 28 | "url": "https://github.com/imcvampire/vue-axios/issues" 29 | }, 30 | "homepage": "https://github.com/imcvampire/vue-axios#readme", 31 | "devDependencies": { 32 | "@babel/core": "^7.19.3", 33 | "@babel/preset-env": "^7.19.3", 34 | "@rollup/plugin-babel": "^5.3.1", 35 | "@rollup/plugin-commonjs": "^22.0.2", 36 | "@rollup/plugin-node-resolve": "^14.1.0", 37 | "gulp": "^5.0.0", 38 | "gulp-clean": "^0.4.0", 39 | "gulp-file": "^0.4.0", 40 | "gulp-filter": "^7.0.0", 41 | "gulp-plumber": "^1.2.1", 42 | "gulp-sourcemaps": "^3.0.0", 43 | "gulp-uglify-es": "^3.0.0", 44 | "merge-stream": "^2.0.0", 45 | "rollup": "^2.79.1" 46 | }, 47 | "peerDependencies": { 48 | "axios": "*", 49 | "vue": "^3.0.0 || ^2.0.0" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Install plugin 3 | * @param app 4 | * @param {axios|Record}options 5 | */ 6 | function plugin(app, options) { 7 | if (app.vueAxiosInstalled) { 8 | return 9 | } 10 | 11 | const normalizedConfig = isAxiosLike(options) ? migrateToMultipleInstances(options) : options; 12 | if (!isValidConfig(normalizedConfig)) { 13 | console.error('[vue-axios] configuration is invalid, expected options are either or { : }'); 14 | return; 15 | } 16 | 17 | const vueVersion = getVueVersion(app); 18 | if (!vueVersion) { 19 | console.error('[vue-axios] unknown Vue version'); 20 | return; 21 | } 22 | const handler = vueVersion < 3 ? registerOnVue2 : registerOnVue3; 23 | Object.keys(normalizedConfig).forEach(registrationKey => { 24 | handler(app, registrationKey, normalizedConfig[registrationKey]) 25 | }) 26 | 27 | app.vueAxiosInstalled = true; 28 | } 29 | 30 | if (typeof exports == "object") { 31 | module.exports = plugin; 32 | } else if (typeof define == "function" && define.amd) { 33 | define([], function () { return plugin }); 34 | } else if (window.Vue && window.axios && window.Vue.use) { // Vue.use is only available in VueJS 2.0 35 | Vue.use(plugin, window.axios); 36 | } 37 | 38 | export default plugin; 39 | 40 | /** 41 | * @param {Vue} app 42 | * @param {string} key 43 | * @param {axios} axiosInstance 44 | * @returns {void} 45 | */ 46 | function registerOnVue2(app, key, axiosInstance) { 47 | Object.defineProperty(app.prototype, key, { 48 | get() { 49 | return axiosInstance 50 | } 51 | }) 52 | app[key] = axiosInstance; 53 | } 54 | 55 | /** 56 | * @param {Vue} app 57 | * @param {string} key 58 | * @param {axios} axiosInstance 59 | * @returns {void} 60 | */ 61 | function registerOnVue3(app, key, axiosInstance) { 62 | app.config.globalProperties[key] = axiosInstance; 63 | app[key] = axiosInstance; 64 | } 65 | 66 | /** 67 | * @param {axios|Record}obj 68 | * @returns {boolean} 69 | */ 70 | function isAxiosLike(obj) { 71 | return obj && typeof obj.get === 'function' && typeof obj.post === 'function' 72 | } 73 | 74 | /** 75 | * Migrates previous configuration to support multiple instances 76 | * @param axiosInstance 77 | * @returns {Record} 78 | */ 79 | function migrateToMultipleInstances(axiosInstance) { 80 | return { 81 | axios: axiosInstance, 82 | $http: axiosInstance, 83 | } 84 | } 85 | 86 | function isValidConfig(config) { 87 | if (typeof config !== 'object') return false 88 | return Object.keys(config).every(key => isAxiosLike(config[key])) 89 | } 90 | 91 | /** 92 | * Return Vue version as a number 93 | * @param {Vue} app 94 | * @returns {?number} 95 | */ 96 | function getVueVersion (app) { 97 | return app && app.version && Number(app.version.split('.')[0]) 98 | } 99 | --------------------------------------------------------------------------------