@nuxtjs/axios

What is @nuxtjs/axios?

@nuxtjs/axios is a Nuxt.js module that integrates the Axios HTTP client with Nuxt.js applications. It simplifies making HTTP requests in a Nuxt.js project by providing a consistent API and additional features tailored for Nuxt.js.

What are @nuxtjs/axios's main functionalities?

Making GET Requests

This feature allows you to make GET requests to fetch data from an API endpoint. The example demonstrates how to use the $axios.$get method within the asyncData lifecycle hook to fetch data before rendering the page.

async asyncData({ $axios }) {
  const data = await $axios.$get('https://api.example.com/data');
  return { data };
}

Making POST Requests

This feature allows you to make POST requests to send data to an API endpoint. The example shows how to use the $axios.$post method to submit form data to a server.

async submitForm({ $axios }, formData) {
  const response = await $axios.$post('https://api.example.com/submit', formData);
  return response;
}

Setting Base URL

This feature allows you to set a base URL for all Axios requests. The example demonstrates how to configure the base URL in the Nuxt.js configuration file.

export default {
  axios: {
    baseURL: 'https://api.example.com'
  }
}

Handling Errors

This feature allows you to handle errors that occur during HTTP requests. The example shows how to use a try-catch block to catch errors and handle them appropriately within the asyncData lifecycle hook.

async asyncData({ $axios, error }) {
  try {
    const data = await $axios.$get('https://api.example.com/data');
    return { data };
  } catch (e) {
    error({ statusCode: 500, message: 'Internal Server Error' });
  }
}

Other packages similar to @nuxtjs/axios

axios

Axios is a promise-based HTTP client for the browser and Node.js. It provides a simple API for making HTTP requests and is the core library that @nuxtjs/axios is built upon. While @nuxtjs/axios is tailored for Nuxt.js, axios can be used in any JavaScript environment.

vue-resource

Vue-resource is an HTTP client for Vue.js applications. It provides services for making web requests and handling responses using a simple and easy-to-understand API. Compared to @nuxtjs/axios, vue-resource is more tightly integrated with Vue.js but lacks some of the advanced features and flexibility of axios.

fetch

Fetch is a native JavaScript API for making HTTP requests. It is built into modern browsers and provides a more low-level approach compared to axios. While fetch is more lightweight and does not require additional dependencies, it lacks some of the convenience features provided by axios, such as request and response interceptors.

README

Axios

This plugin is a wrapper around axios.

• Sets default base URL.
• Handles all HTTP exceptions and prevents server side unhandled promise exceptions.
• 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 exceptions.
• Automatically enables withCredentials when requesting to default base URL.

Setup

• Add @nuxtjs/axios dependency using yarn or npm to your project
• Add @nuxtjs/axios module to nuxt.config.js:

  modules: [
    '@nuxtjs/axios'
  ]

Usage

Inside asyncData

async asyncData({app: {$axios}}) {
  const {data} = await $axios.get('http://icanhazip.com')
  return {
    ip: data
  }
}

Inside component methods

async mounted() {
  const {data} = await this.$get('http://icanhazip.com')
  this.ip = data
}

Customization

Customization can be done using shared environment variables.

Environment variable	Default	Description
API_URL	http://localhost:3000	Base url for ajax requests in server-side
API_URL_BROWSER	[API_URL]	Base url for ajax requests in client-side
API_PREFIX	/api	Adds this prefix before all relative urls

Changelog

1.0.1 (2017-05-26)

Bug Fixes

• axios: remove extra function call on computed prop (cd9da0b)

<a name="1.0.0"></a>