Looking forQuasar v2 betawith Vue 3 docs?
Ajax Requests
Quasar recommends Axios during project initialization:
Use Axios for Ajax calls? (Y/n)
Then you should create a new boot file axios.js
that looks like this:
(Here you can also specify additional settings for your axios instance)
// src/boot/axios.js
import Vue from 'vue'
import axios from 'axios'
Vue.prototype.$axios = axios
// ^ ^ ^ this will allow you to use this.$axios
// so you won't necessarily have to import axios in each vue file
const api = axios.create({ baseURL: 'https://api.example.com' })
Vue.prototype.$api = api
// ^ ^ ^ this will allow you to use this.$api
// so you can easily perform requests against your app's API
export { axios, api }
Also make sure to yarn/npm install the axios
package.
TIP
Be sure to check out Prefetch Feature if you are using Quasar CLI.
Usage in your single file components methods will be like:
import { api } from 'boot/axios'
methods: {
loadData () {
api.get('/api/backend')
.then((response) => {
this.data = response.data
})
.catch(() => {
this.$q.notify({
color: 'negative',
position: 'top',
message: 'Loading failed',
icon: 'report_problem'
})
})
},
}
Usage in Vuex Actions for globally adding headers to axios (such as during authentication):
import { api } from 'boot/axios'
export function register ({commit}, form) {
return api.post('/auth/register', form)
.then(response => {
api.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.token
commit('login', {token: response.data.token, user: response.data.user})
})
}
Also look at Axios docs for more information.