![Introducing Enhanced Alert Actions and Triage Functionality](https://cdn.sanity.io/images/cgdhsj6q/production/fe71306d515f85de6139b46745ea7180362324f0-2530x946.png?w=800&fit=max&auto=format)
Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
@nuxtjs/axios
Advanced tools
Changelog
2.0.0 (2017-06-09)
API_URL
if same host and port else API_URL
(3421d19)<a name="1.0.2"></a>
Readme
Use axios with deep Nuxt integration and no pain!
$get
,$post
,... into vue context instances so requests can be done easily.setToken
function to $axios
so we can easily and globally set authentication tokens.withCredentials
when requesting to base URL.@nuxtjs/axios
dependency using yarn or npm to your project@nuxtjs/axios
module to nuxt.config.js
: modules: [
'@nuxtjs/axios'
]
asyncData
async asyncData({ app }) {
const {data} = await app.$axios.get('http://icanhazip.com')
return {
ip: data
}
}
You can always access axios instance using this.$axios
.
This mixins are available for easier usage:
$request
this.$request({url: 'http://example.com')
$get
, $delete
, $head
this.$get('http://example.com')
$post
, $put
, $patch
this.$post('http://example.com', { foo: 'bar' })
Example:
async mounted() {
const {data} = await this.$get('http://icanhazip.com')
this.ip = data
}
nuxtServerInit
async nuxtServerInit ({ commit }, { app }) {
const { data } = await app.$axios.get('http://icanhazip.com')
commit('SET_IP', data)
}
If you need axios instance in store actions, you may have to pass it when dispatching.
// In components
export default {
methods: {
updateIP() {
this.$store.dispatch('getIP', { $axios: this.$axios })
}
}
}
// In store
{
actions: {
async getIP ({ commit }, { $axios }) {
const { data } = await $axios.get('http://icanhazip.com')
commit('SET_IP', data)
}
}
}
You can pass options using module options or axios
section in nuxt.config.js
:
baseURL
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
/api
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
.
browserBaseURL
is not provided it defaults to baseURL
value.
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
true
Adds an interceptor to automatically set withCredentials
config of axios when requesting to baseUrl
which allows passing authentication headers to backend.
proxyHeaders
true
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.
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}) {
// Magically makes request to http://www.mocky.io/v2/59388bb4120000dc00a672e2
const {data: {nuxt} } = await app.$axios.get('59388bb4120000dc00a672e2')
return {
nuxt // -> 'Works!'
}
}
Details
'@nuxtjs/axios'
http://[host]:[port]/api
which is http://localhost:3000/api
'/api': 'http://www.mocky.io/v2'
/api
to http://www.mocky.io/v2
pathRewrite
to remove /api
from starting of requests and change it to /v2
FAQs
Secure and easy Axios integration with Nuxt.js
The npm package @nuxtjs/axios receives a total of 161,855 weekly downloads. As such, @nuxtjs/axios popularity was classified as popular.
We found that @nuxtjs/axios demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 4 open source maintainers 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.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.