We recommend selecting Axios during project initialization.
If you haven’t selected Axios during the project initialization 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)
import { defineBoot } from '#q-app'
import axios from 'axios'
const api = axios.create({ baseURL: 'https://api.example.com' })
export default defineBoot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api
app.config.globalProperties.$axios = axios
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file
app.config.globalProperties.$api = api
// ^ ^ ^ this will allow you to use this.$api (for Vue Options API form)
// so you can easily perform requests against your app's API
})
export { axios, api }Also make sure to pnpm/yarn/npm/bun 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 below. Notice that in the next example we’re using the Quasar’s Notify plugin (through $q = useQuasar() and $q.notify) which you’ll need to install (follow the link earlier).
import { ref } from 'vue'
import { useQuasar } from 'quasar'
import { api } from '@/boot/axios'
setup () {
const $q = useQuasar()
const data = ref(null)
function loadData () {
api.get('/api/backend')
.then((response) => {
data.value = response.data
})
.catch(() => {
$q.notify({
color: 'negative',
position: 'top',
message: 'Loading failed',
icon: 'report_problem'
})
})
}
return { data, loadData }
}Usage in Pinia Actions for globally adding headers to axios (such as during authentication):
import { api } from '@/boot/axios'
export const useAuthStore = defineStore('auth', {
actions: {
register (form) {
return api.post('/auth/register', form)
.then(response => {
api.defaults.headers.common['Authorization'] = 'Bearer ' + response.data.token
// do something with { token: response.data.token, user: response.data.user }
})
}
})Also look at Axios docs for more information.