Skip to content
On this page

Fetching Data

Most front-end applications need a way to get data from the back end services they leverage.


Looks like there is a newer built in method, fetch to make a query:
do we still need axios with fetch api available? at DuckDuckGo
Fetch API - Web APIs | MDN
Axios or fetch(): Which should you use? - LogRocket Blog

Fetch may be a little bit more verbose, but only slightly


Axios seems to be the way to go

npm add axios

then use it:

  import axios from 'axios'

  export default {
    async asyncData ({ params }) {
      let { data } = await axios.get(`http://localhost:3000/index.json`)
      return { items: data }

Be sure to enable requests on the back-end server: Usage - Axios Module axios/axios: Promise based HTTP client for the browser and node.js


GET requests expect a 'params' option

          .get(`${apiUrl}/verify`, {
          params: {
            ticket: ticket,
            service: this.$store.state.globals.Return,

POST requests pass the second attribute to the API

          .post(`${apiUrl}/authentication`, {
            ticket: ticket,
            service: this.$store.state.globals.Return,


You can still catch errors with await calls by chaining the calls to catch, similar to the way you would with promises. how to catch error with await at DuckDuckGo Better error handling with async/await - DEV javascript - How do I catch thrown errors with async / await? - Stack Overflow


Remote calls

In a method, you can make remote calls with something like

const ip = await this.$axios.$get('')

Nuxt comes with special functions for handling axios requests when called from a server side rendering context.


Fetch is an improved method for retrieving data.

The component context is available. Assignments to data in the local context can be made directly with this approach (via this).


The component context is not available directly in asyncData, so a context must be passed in. The return value will eventually get merged in with the component's data.


If you get an error like:

ECONNREFUSED TCPConnectWrap.afterConnect

The nuxt server may be initiating the axios call for server side rendering. If you're using a containerized setup with nginx acting as a proxy, the source address may be different relative to the server. To get around this, specify a different source based on context (server vs client). You can also use a method that gets called on mounted so it only runs on the client. (skip server rendering)

Wrap request in if (process.server) within the retrieval methods of the page

    let urlPrefix
    if (process.server) {
      urlPrefix = context.$config.apiUrlSSR
    } else {
      urlPrefix = context.$config.apiUrl

    const personData = await context.$axios.get(
      urlPrefix + 'user/details/' +
    return {

More configuration options