layout
hero
features
home
name
text
image
actions
axios docs
axios is a simple HTTP client for the browser and Node.js
dark
light
alt
/logo.svg
/logo-light.svg
axios
theme
text
link
brand
Get started
/pages/getting-started/first-steps
theme
text
link
alt
API reference
/pages/advanced/api-reference
title
details
Simple implementation
Getting started with axios is as simple as a single line of code. Making simple API requests can be done in 2 lines of code.
title
details
Powerful interceptors
Our innovative interceptor system allows you to control the request and response lifecycle. You can modify requests, responses, and errors.
title
details
TypeScript support
axios declares types and has full support for TypeScript. This means you can use axios with confidence in your TypeScript projects.
<script setup>
import Splide from '@splidejs/splide';
import { onMounted } from 'vue';
import allSponsors from './data/sponsors.json';
onMounted(() => {
new Splide(
'.splide',
{
type: 'loop',
autoplay: true,
interval: 3000,
perPage: 5,
perMove: 1,
gap: 10,
snap: true,
pagination: false,
}
).mount();
});
const activeGoldSponsors = allSponsors.gold.filter((sponsor) => sponsor.active);
const activeSilverSponsors = allSponsors.silver.filter((sponsor) => sponsor.active);
const sponsors = [...activeGoldSponsors, ...activeSilverSponsors];
const capitalizeFirstLetter = (word) => {
return String(word).charAt(0).toUpperCase() + String(word).slice(1);
};
</script>
{{ sponsor.name }}
{{ capitalizeFirstLetter(sponsor.tier) }}
<style module>
.container {
display: flex;
margin: 0 auto;
max-width: 1200px;
}
.cardWrapper {
display: flex;
flex-direction: column;
grid-column: span 1 / span 1;
border-radius: 0.5rem;
border: 1px solid var(--vp-c-gutter) !important;
text-align: center;
background-color: var(--card-background-color) !important;
width: 11.5rem;
scroll-snap-align: center;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
flex-shrink: 0 !important;
margin-bottom: 0.5rem !important;
margin-top: 0.5rem !important;
}
.imgWrapper {
display: flex;
padding: 1.75rem;
padding-bottom: 0.75rem;
flex-direction: column;
flex: 1 1 0%;
align-items: center;
justify-content: center;
}
.img {
width: 8rem;
height: 8rem;
}
.heading {
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 3rem;
margin-top: 1rem !important;
font-size: 1rem !important;
line-height: 1.5rem !important;
font-weight: 600 !important;
color: var(--vp-c-text-1) !important;
text-wrap-style: pretty;
display: -webkit-box;
}
.cardDl {
display: flex;
margin-top: 0.25rem;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
}
.tagSponsorGold {
display: inline-flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
border-radius: 9999px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-inset: inset;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: #FFF;
background-color: #F59E0B;
}
.tagSponsorSilver {
display: inline-flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
border-radius: 9999px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-inset: inset;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: #FFF;
background-color: #9CA3AF;
}
.tagSponsorBronze {
display: inline-flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
border-radius: 9999px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-inset: inset;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: #FFF;
background-color: #854D0E;
}
.tagSponsorBacker {
display: inline-flex;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
align-items: center;
border-radius: 9999px;
box-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
--tw-ring-inset: inset;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 500;
color: #FFF;
background-color: #2563EB;
}
.linksWrapper {
display: flex;
margin-top: -1px;
}
.link {
display: flex;
flex: 1 1 0%;
width: 0;
}
.rightLink {
display: inline-flex;
position: relative;
padding-top: 1rem;
padding-bottom: 1rem;
margin-right: -1px;
flex: 1 1 0%;
column-gap: 0.75rem;
justify-content: center;
align-items: center;
border-bottom-left-radius: 0.5rem;
border-top: 1px;
border-right: 1px;
border-left: 0px;
border-bottom: 0px;
border-style: solid;
border-color: var(--vp-c-gutter);
width: 0;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: #111827;
}
.leftLink {
display: inline-flex;
position: relative;
padding-top: 1rem;
padding-bottom: 1rem;
flex: 1 1 0%;
column-gap: 0.75rem;
justify-content: center;
align-items: center;
border-bottom-right-radius: 0.5rem;
border-top: 1px;
border-left: 0px;
border-bottom: 0px;
border-right: 0px;
border-style: solid;
border-color: var(--vp-c-gutter);
width: 0;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
color: #111827;
}
.linkIcon {
width: 1.25rem;
height: 1.25rem;
color: #9CA3AF;
}
</style>
Jay
054c1f30fd