Usage

Making Requests

See the API reference for a list of available HTTP methods

Calling a HTTP methods returns a Promise that resolves to a Reponse object or rejects in case of network errors.

You can use methods to convert response stream into usable data:

  • json
  • text
  • formData
  • arrayBuffer
  • blob

See ky docs for all available options.

Example: GET JSON data

const res = await $http.get('https://unpkg.com/nuxt/package.json')
const data = await res.json()

Alternatively for json only you can use $ prefixed shortcut that smartly parses response using destr.

await $http.$get('https://unpkg.com/nuxt/package.json')

Example: POST with JSON body

await $http.post('http://api.con', { foo: 'bar' })

Using in asyncData

For asyncData and fetch you can access instance from context:

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

Example: GET JSON data using prefixed

async asyncData({ $http }) {
  const users = await $http.$get('https://reqres.in/api/users')
  return { users }
}

Using in Component Methods

this is not available in Nuxt's asyncData method, see using in asyncData for how to use this module in asyncData

When you have access to this, you can use this.$http:

methods: {
  async fetchSomething() {
    const res = await this.$http.get('http://icanhazip.com')
    const ip = await res.text()
    this.ip = ip
  }
}

Using in Store

For store actions you can also use this.$http:

// In store
{
  actions: {
    async getIP ({ commit }) {
      const res = await this.$http.get('http://icanhazip.com')
      const ip = await res.text()
      commit('SET_IP', ip)
    }
  }
}