Nuxt HTTP Preset

A Nuxt module to manage and simplify HTTP requests across multiple APIs and endpoints.

✨ Get started

1. Install and add to Nuxt with one command

npm install nuxt-http-preset

Usage Example

<template>
  <div>
    <p>{{ data }}</p>
  </div>
</template>

<script setup>
const data = ref()

# adds a new endpoint
useHttp().add('ddd', {
  baseURL: 'https://brasilapi.com.br/api/ddd/v1',
})

# makes a request to the "ddd" endpoint using its settings
useHttp().request('ddd').fetch('47').then((res) => {
  data.value = res
})
</script>

endpoints are linked globally and can be accessed from anywhere

📖 Docs

useHttp().add()

adds a new endpoint

useHttp().add('closeApi', {
  baseURL: 'localhost:9000/api',
  headers: {
    authorization: 'yout-token-from-acess',
  },
})

you can configure default parameters as available in $fetch

useHttp().request()

uses an available endpoint, you can choose to use fetch or useFetch

fetch https://nuxt.com/docs/api/utils/dollarfetch

useHttp().request('closeApi').fetch('verifySession', {
  method: 'POST',
}).catch((err) => {
  if (err.code == 401) {
    navigateTo('/')
    console.log('session expired')
  }
})

useFetch https://nuxt.com/docs/api/composables/use-fetch

useHttp().request('ddd').useFetch('47').then((res) => {
  data.value = res.data
}).catch((error) => {
  console.log(error)
})

useHttp().endpoints()

list available endpoints

# Return: [ "ddd", "closeApi" ]
console.log(useHttp().endpoints)

Adding endpoints by app.config.ts

If you want to define an endpoint in a fixed way in your project, you can add it directly through "app.config.ts", this way the endpoint is defined as soon as the module is instantiated

# app.config.ts
export default defineAppConfig({
  http: {
    endpoints: [
      { name: 'example',
        fetchOptions: {
          baseURL: 'https://api.example.com',
        },
      },
      { name: 'another',
        fetchOptions: {
          baseURL: 'https://api.another.com',
        },
      },
    ],
  },
})

normally using the endpoint

useHttp().request('example').fetch('/api').then((res) => {
  console.log(res)
})

useHttp().request('another').fetch('/api', {
  method: 'POST',
}).then((res) => {
  console.log(res)
})