Security News
New axobject-query Maintainer Faces Backlash Over Controversial Decision to Support Legacy Node.js Versions
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
vue-axios
Advanced tools
Package description
vue-axios is a small wrapper for integrating axios with Vue.js applications. It allows you to use axios, a popular HTTP client, within your Vue components easily.
Basic HTTP Requests
This feature allows you to make basic HTTP requests (GET, POST, PUT, DELETE) within your Vue components using axios.
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
new Vue({
el: '#app',
data: {
info: null
},
mounted() {
this.axios
.get('https://api.example.com/data')
.then(response => (this.info = response.data))
.catch(error => console.log(error));
}
});
Interceptors
This feature allows you to set up interceptors for requests and responses, enabling you to handle things like authentication tokens or logging.
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
// Add a request interceptor
axios.interceptors.request.use(
config => {
// Do something before request is sent
console.log('Request Interceptor:', config);
return config;
},
error => {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
axios.interceptors.response.use(
response => {
// Do something with response data
console.log('Response Interceptor:', response);
return response;
},
error => {
// Do something with response error
return Promise.reject(error);
}
);
Global Configuration
This feature allows you to set global configurations for axios, such as base URLs and headers, which will be applied to all HTTP requests made using axios.
import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
Vue.use(VueAxios, axios);
// Set a global base URL
axios.defaults.baseURL = 'https://api.example.com';
// Set a global header
axios.defaults.headers.common['Authorization'] = 'Bearer token';
vue-resource is another HTTP client for Vue.js. It provides a similar functionality to vue-axios but is less popular and less actively maintained. It offers a simpler API for making HTTP requests but lacks some of the advanced features of axios, such as interceptors.
axios is the core HTTP client that vue-axios wraps around. It can be used directly in Vue.js applications without the vue-axios wrapper. It offers a wide range of features, including interceptors, request/response transformation, and more. Using axios directly provides more flexibility but requires more setup compared to vue-axios.
fetch is a built-in JavaScript API for making HTTP requests. It is a modern alternative to XMLHttpRequest and is supported in most modern browsers. While it lacks some of the convenience features of axios, such as automatic JSON transformation and interceptors, it is a lightweight and native option for making HTTP requests in Vue.js applications.
Readme
A small wrapper for integrating axios to Vuejs
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
.
npm install --save axios vue-axios
Import libraries in entry file:
// import Vue from 'vue' // in Vue 2
import * as Vue from 'vue' // in Vue 3
import axios from 'axios'
import VueAxios from 'vue-axios'
Usage in Vue 2:
Vue.use(VueAxios, axios)
Usage in Vue 3:
const app = Vue.createApp(...)
app.use(VueAxios, axios)
Just add 3 scripts in order: vue
, axios
and vue-axios
to your document
.
This wrapper bind axios
to Vue
or this
if you're using single file component.
You can use axios
like this:
Vue.axios.get(api).then((response) => {
console.log(response.data)
})
this.axios.get(api).then((response) => {
console.log(response.data)
})
this.$http.get(api).then((response) => {
console.log(response.data)
})
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:
// App.vue
export default {
name: 'App',
methods: {
getList() {
this.axios.get(api).then((response) => {
console.log(response.data)
})
// or
this.$http.get(api).then((response) => {
console.log(response.data)
})
}
}
}
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
:
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App).use(store)
app.use(VueAxios, axios)
app.provide('axios', app.config.globalProperties.axios) // provide 'axios'
app.mount('#app')
// App.vue
import { inject } from 'vue'
export default {
name: 'Comp',
setup() {
const axios: any = inject('axios') // inject axios
const getList = (): void => {
axios
.get(api)
.then((response: { data: any }) => {
console.log(response.data)
});
};
return { getList }
}
}
Please kindly check full documentation of axios too
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 axiosFor Vue it looks like this:
// Vue 2 / Vue 3 + Composition API
import App from './App.vue'
import VueAxios from 'vue-axios'
import axios from 'axios'
import axios2 from 'axios'
Vue.use(VueAxios, { $myHttp: axios, axios2: axios2 }) // or app.use() for Vue 3 Optiona API
// usage
export default {
methods: {
getList(){
this.$myHttp.get(api).then((response) => {
console.log(response.data)
})
this.axios2.get(api).then((response) => {
console.log(response.data)
})
}
}
}
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.:
// Vue 2 + Setup function
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
const app = createApp(App).use(store)
app.use(VueAxios, { $myHttp: axios, axios2: axios2 })
app.provide('$myHttp', app.config.globalProperties.$myHttp) // provide '$myHttp'
app.provide('axios2', app.config.globalProperties.axios2) // provide 'axios2'
app.mount('#app')
// App.vue
import { inject } from 'vue'
export default {
name: 'Comp',
setup() {
const $myHttp: any = inject('$myHttp') // inject $myHttp
const getListWithMyHttp = (): void => {
$myHttp
.get(api)
.then((response: { data: any }) => {
console.log(response.data)
});
};
const axios2: any = inject('axios2') // inject axios2
const getListWithAxios2 = (): void => {
axios2
.get(api)
.then((response: { data: any }) => {
console.log(response.data)
});
};
return { getListWithMyHttp, getListWithAxios2 }
}
}
FAQs
A small wrapper for integrating axios to Vuejs
The npm package vue-axios receives a total of 82,846 weekly downloads. As such, vue-axios popularity was classified as popular.
We found that vue-axios demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A JavaScript library maintainer is under fire after merging a controversial PR to support legacy versions of Node.js.
Security News
Results from the 2023 State of JavaScript Survey highlight key trends, including Vite's dominance, rising TypeScript adoption, and the enduring popularity of React. Discover more insights on developer preferences and technology usage.
Security News
The US Justice Department has penalized two consulting firms $11.3 million for failing to meet cybersecurity requirements on federally funded projects, emphasizing strict enforcement to protect sensitive government data.