Axios
Use axios with deep Nuxt integration and no pain!
- Automatically set base URL for client & server side
- Injects
$get
,$post
,... into vue context instances so requests can be done easily. - Exposes
setToken
function to $axios
so we can easily and globally set authentication tokens. - Throws nuxt-friendly errors and optionally redirect on specific error codes.
- Automatically enables
withCredentials
when requesting to base URL. - Proxy request headers in SSR.
Setup
- Add
@nuxtjs/axios
dependency using yarn or npm to your project - Add
@nuxtjs/axios
to modules
section of nuxt.config.js
{
modules: [
'@nuxtjs/axios',
['@nuxtjs/axios', { credentials: false }],
],
axios: {
credentials: false
}
}
Usage
Component asyncData
async asyncData({ app }) {
const {data} = await app.$axios.get('http://icanhazip.com')
return {
ip: data
}
}
Component mixins
You can always access axios instance using this.$axios
.
This mixins are available for easier usage:
this.$request({url: 'http://example.com')
this.$get('http://example.com')
this.$post('http://example.com', { foo: 'bar' })
Example:
async mounted() {
const {data} = await this.$get('http://icanhazip.com')
this.ip = data
}
Store nuxtServerInit
async nuxtServerInit ({ commit }, { app }) {
const { data } = await app.$axios.get('http://icanhazip.com')
commit('SET_IP', data)
}
Store actions
If you need axios instance in store actions, you may have to pass it when dispatching.
export default {
methods: {
updateIP() {
this.$store.dispatch('getIP', { $axios: this.$axios })
}
}
}
{
actions: {
async getIP ({ commit }, { $axios }) {
const { data } = await $axios.get('http://icanhazip.com')
commit('SET_IP', data)
}
}
}
Options
You can pass options using module options or axios
section in nuxt.config.js
baseURL
- Default:
http://[HOST]:[PORT]/api
Base URL is required for requests in server-side & SSR and prepended to all requests with relative path.
You can also use environment variable API_URL
which overrides baseURL
.
browserBaseURL
Base URL which is used in client side prepended to all requests with relative path.
You can also use environment variable API_URL_BROWSER
which overrides browserBaseURL
.
- If
browserBaseURL
is not provided it defaults to baseURL
value.
- If hostname & port of
browserbaseURL
are equal to nuxt server, it defaults to relative part of baseURL
.
So if your nuxt application is being accessed under a different domain, requests go to same origin and prevents Cross-Origin problems.
credentials
Adds an interceptor to automatically set withCredentials
config of axios when requesting to baseUrl
which allows passing authentication headers to backend.
debug
Adds interceptors to log all responses and requests
In SSR context, sets client request header as axios default request headers.
This is useful for making requests which need cookie based auth on server side.
Also helps making consistent requests in both SSR and Client Side code.
redirectError
This option is a map from specific error codes to page which they should be redirect.
For example if you want redirecting all 401
errors to /login
use:
{
axios: {
redirectError: {
401: '/login'
}
}
}
Helpers
Axios instance has a helper to easily set any header.
Parameters:
- name: Name of the header
- value: Value of the header
- scopes: Send only on specific type of requests. Defaults
- Type: Array or String
- Defaults to
common
meaning all types of requests - Can be
get
, post
, delete
, ...
this.$axios.setHeader('Authorization', '123')
this.$axios.setHeader('Authorization', '456')
this.$axios.setHeader('Content-Type', 'application/x-www-form-urlencoded', ['post'])
this.$axios.setHeader('Content-Type', false, ['post'])
setToken(token, type, scopes='common')
Axios instance has an additional helper to easily set global authentication header.
Parameters:
- token: Authorization token
- type: Authorization token prefix(Usually
Bearer
). - scopes: Send only on specific type of requests. Defaults
- Type: Array or String
- Defaults to
common
meaning all types of requests - Can be
get
, post
, delete
, ...
this.$axios.setToken('123')
this.$axios.setToken('456')
this.$axios.setToken('123', 'Bearer')
this.$axios.setToken('123', 'Bearer', ['post', 'delete'])
this.$axios.setToken(false)
Dynamic API Backend
Please notice that, API_URL
is saved into bundle on build, CANNOT be changed
on runtime! You may use proxy module for dynamically route api requests to different backend on test/staging/production.
Example: (nuxt.config.js
)
{
modules: [
'@nuxtjs/axios',
'@nuxtjs/proxy'
],
proxy: [
['/api', { target: 'http://www.mocky.io', pathRewrite: { '^/api': '/v2' } }]
]
}
Start Nuxt
[AXIOS] Base URL: http://localhost:3000/api | Browser: /api
[HPM] Proxy created: /api -> http://www.mocky.io
[HPM] Proxy rewrite rule created: "^/api" ~> "/v2"
Now you can make requests to backend: (Works fine in both SSR and Browser)
async asyncData({app}) {
const {data: {nuxt} } = await app.$axios.get('59388bb4120000dc00a672e2')
return {
nuxt
}
}
Details