npmpackage.info

vue-axios

A small wrapper for integrating axios to Vuejs

3.5.2

2,014

MIT

JavaScript

776.00 B

27,630,846 3.7

Installations

npm install vue-axios

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

12.22.12

NPM Version

6.14.16 Score

Supply Chain

96.2

Quality

75.7

Maintenance

100

Vulnerability

100

License

Pull Requests

Open

6

Total

89

Closed

10

Merged

73

Issues

Open

5

Total

81

Closed

76

Releases

3.5.2

Published on 04 Nov 2022

3.5.1

Published on 27 Oct 2022

3.5.0

Published on 12 Oct 2022

3.4.1

Published on 07 Feb 2022

3.4.0

Published on 05 Nov 2021

3.3.7

Published on 17 Sept 2021

View all 28 releases

Contributors

Unable to fetch Contributors

View all 10 contributors

Languages

JavaScript

JavaScript (100%)

Developer

imcvampire

Download Statistics

Total Downloads

27,630,846

Last Day

8,633

Last Week

55,434

Last Month

411,216

Last Year

5,490,989

GitHub Statistics

2,014 Stars

206 Commits

182 Forks

44 Watching

7 Branches

10 Contributors

Bundle Size

1.81 kB

Minified

776.00 B

Minified + Gzipped

Bundlephobia

Maintainers

Package Meta Information

Latest Version

3.5.2

Package Id

vue-axios@3.5.2

Unpacked Size

10.81 kB

Size

3.81 kB

File Count

NPM Version

6.14.16

Node Version

12.22.12

Total Downloads

Cumulative downloads

Total Downloads

27,630,846

Last day

-21.8%

8,633

Compared to previous day

Last week

-39.9%

55,434

Compared to previous week

Last month

-10.9%

411,216

Compared to previous month

Last year

-1.1%

5,490,989

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

axios vue

Dev Dependencies

@babel/core @babel/preset-env @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve gulp gulp-clean gulp-file gulp-filter gulp-plumber gulp-sourcemaps gulp-uglify-es merge-stream rollup

Versions

vue-axios

A small wrapper for integrating axios to Vuejs

Why

I created this library because, in the past, I needed a simple solution to migrate from vue-resource to axios.

It only binds axios to the vue instance so you don't have to import everytime you use axios.

How to install:

ES6 Module:

1npm install --save axios vue-axios

Import libraries in entry file:

1// import Vue from 'vue'   // in Vue 2
2import * as Vue from 'vue' // in Vue 3
3import axios from 'axios'
4import VueAxios from 'vue-axios'

Usage in Vue 2:

1Vue.use(VueAxios, axios)

Usage in Vue 3:

1const app = Vue.createApp(...)
2app.use(VueAxios, axios)

Script:

Just add 3 scripts in order: vue, axios and vue-axios to your document.

Usage:

in Vue 2

This wrapper bind axios to Vue or this if you're using single file component.

You can use axios like this:

1Vue.axios.get(api).then((response) => {
2  console.log(response.data)
3})
4
5this.axios.get(api).then((response) => {
6  console.log(response.data)
7})
8
9this.$http.get(api).then((response) => {
10  console.log(response.data)
11})

in Vue 3

This wrapper bind axios to app instance or this if you're using single file component.

in option API, you can use axios like this:

1// App.vue
2export default {
3  name: 'App',
4  methods: {
5    getList() {
6      this.axios.get(api).then((response) => {
7        console.log(response.data)
8      })
9      // or
10      this.$http.get(api).then((response) => {
11        console.log(response.data)
12      })
13    }
14  }
15}

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:

1// main.ts
2import { createApp } from 'vue'
3import App from './App.vue'
4import store from './store'
5import axios from 'axios'
6import VueAxios from 'vue-axios'
7
8const app = createApp(App).use(store)
9app.use(VueAxios, axios)
10app.provide('axios', app.config.globalProperties.axios)  // provide 'axios'
11app.mount('#app')
12
13// App.vue
14import { inject } from 'vue'
15
16export default {
17  name: 'Comp',
18  setup() {
19    const axios: any = inject('axios')  // inject axios
20
21    const getList = (): void => {
22      axios
23        .get(api)
24        .then((response: { data: any }) => {
25          console.log(response.data)
26        });
27    };
28
29    return { getList }
30  }
31}

Please kindly check full documentation of axios too

Multiple axios instances support

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:

<key> is registration name
<value> is instance of axios

For Vue it looks like this:

1// Vue 2 / Vue 3 + Composition API
2import App from './App.vue'
3import VueAxios from 'vue-axios'
4import axios from 'axios'
5import axios2 from 'axios'
6Vue.use(VueAxios, { $myHttp: axios, axios2: axios2 }) // or app.use() for Vue 3 Optiona API
7
8// usage
9export default {
10  methods: {
11    getList(){
12      this.$myHttp.get(api).then((response) => {
13        console.log(response.data)
14      })
15      this.axios2.get(api).then((response) => {
16        console.log(response.data)
17      })
18    }
19  }
20}

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.:

1// Vue 2 + Setup function
2import { createApp } from 'vue'
3import App from './App.vue'
4import store from './store'
5import axios from 'axios'
6import VueAxios from 'vue-axios'
7
8const app = createApp(App).use(store)
9app.use(VueAxios, { $myHttp: axios, axios2: axios2 })
10app.provide('$myHttp', app.config.globalProperties.$myHttp)  // provide '$myHttp'
11app.provide('axios2', app.config.globalProperties.axios2)  // provide 'axios2'
12app.mount('#app')
13
14// App.vue
15import { inject } from 'vue'
16
17export default {
18  name: 'Comp',
19  setup() {
20    const $myHttp: any = inject('$myHttp')  // inject $myHttp
21
22    const getListWithMyHttp = (): void => {
23      $myHttp
24        .get(api)
25        .then((response: { data: any }) => {
26          console.log(response.data)
27        });
28    };
29
30    const axios2: any = inject('axios2')  // inject axios2
31    const getListWithAxios2 = (): void => {
32      axios2
33        .get(api)
34        .then((response: { data: any }) => {
35          console.log(response.data)
36        });
37    };
38
39
40    return { getListWithMyHttp, getListWithAxios2 }
41  }
42}

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

7

SAST

Determines if the project uses static code analysis.

4

Security-Policy

Determines if the project has published a security policy.

2

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

0

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Fuzzing

Determines if the project uses fuzzing.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

49 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-8hc4-vh64-cxmj
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfq8-rq6v-vf5m
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-4gmj-3p3h-gm8h
Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm

Score

3.7

/10

Last Scanned on 2025-01-06

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

Other packages similar to vue-axios

vue-cli-plugin-axios

0.0.4

Vue-cli-3 plugin: axios

vue-request

2.0.4

This is a library that can easily help you manage request states, supporting common features such as SWR, polling, error retry, caching, and pagination, etc.

vue-cli-plugin-axios-ts

1.0.2

Vue-cli-3 plugin: axios for ts

@alova/adapter-axios

2.0.12

axios adapter for alova.js