nuxt-http-preset
v1.0.0
Published
A Nuxt module to manage and simplify HTTP requests across multiple APIs and endpoints.
Downloads
497
Maintainers
Readme
Nuxt HTTP Preset
A Nuxt module to manage and simplify HTTP requests across multiple APIs and endpoints.
✨ Get started
- 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)
})