Nuxt Example

export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: {
    enabled: true,
  },
  future: {
    compatibilityVersion: 4,
  },
  heyApi: {
    config: {
      input:
        'https://raw.githubusercontent.com/swagger-api/swagger-petstore/master/src/main/resources/openapi.yaml',
      plugins: [
        '@hey-api/schemas',
        {
          name: '@hey-api/sdk',
          transformer: true,
          validator: true,
        },
        {
          enums: 'javascript',
          name: '@hey-api/typescript',
        },
        '@hey-api/transformers',
        'zod',
      ],
    },
  },
  modules: ['@hey-api/nuxt'],
});

{
  "dependencies": {
    "@hey-api/nuxt": "latest",
    "nuxt": "^3.14.0",
    "vue": "^3.5.0",
    "zod": "^4.0.0"
  },
  "scripts": {
    "dev": "nuxt dev",
    "build": "nuxt build",
    "preview": "nuxt preview"
  }
}

<script setup lang="ts">
import { client } from '#hey-api/client.gen';

// configure internal service client
client.setConfig({
  auth: () => {
    // fetch auth token
    return undefined;
  },
  // set default base url for requests
  baseURL: 'https://petstore3.swagger.io/api/v3',
  // set default headers for requests
  headers: {
    Authorization: 'Bearer <token_from_service_client>',
  },
  onRequest: () => {
    console.log('onRequest: global');
  },
  onResponse: () => {
    console.log('onResponse: global');
  },
});
</script>

<template>
  <div>
    <NuxtRouteAnnouncer />
    <Home />
  </div>
</template>

<script setup lang="ts">
const name = ref('foo');
const petId = ref(BigInt(8));
const status = ref<NonNullable<FindPetsByStatusData['query']>['status']>('available');

function incrementPetId() {
  petId.value++;
}

function changeStatus() {
  status.value = status.value === 'available' ? 'pending' : 'available';
}

const query = computed(() => ({
  status: status.value,
}));

/**
 * useAsyncData
 * 
 * During SSR data is fetched only on the server side and transferred to the
 * client.
 */
const asyncData = await getPetById({
  asyncDataOptions: {
    default: () => ({
      name: 'Default Pet',
      photoUrls: [],
    }),
    watch: [petId],
  },
  composable: 'useAsyncData',
  key: 'item',
  path: {
    petId,
  },
});

watch(asyncData.data, (newPet) => {
  console.log('pet', newPet);
});

await findPetsByStatus({
  asyncDataOptions: {
    watch: [status],
  },
  composable: 'useAsyncData',
  query,
});

/**
 * useAsyncData + useRequestFetch
 * 
 * This will forward the user's headers to the event handler.
 */
const requestFetch = useRequestFetch();
const asyncDataWithRequestFetch = await getPetById({
  $fetch: requestFetch,
  composable: 'useAsyncData',
  path: {
    petId: BigInt(8),
  },
});

/**
 * useFetch
 * 
 * You can also use useFetch as shortcut of useAsyncData + $fetch.
 */
const fetch = await getPetById({
  composable: 'useFetch',
  path: {
    petId: BigInt(8),
  },
});

/**
 * useLazyAsyncData
 * 
 * Navigation will occur before fetching is complete. Handle 'pending' and
 * 'error' states directly within your component's template.
 */
const lazyAsyncData = await getPetById({
  composable: 'useLazyAsyncData',
  key: 'count',
  path: {
    petId: BigInt(8),
  },
});

watch(lazyAsyncData.data, (newPet) => {
  if (newPet) {
    console.log(newPet.name);
  }
});

/**
 * useLazyFetch
 * 
 * Navigation will occur before fetching is complete.
 */
const lazyFetch = await getPetById({
  composable: 'useLazyFetch',
  path: {
    petId: BigInt(8),
  },
});

watch(lazyFetch.data, (newPet) => {
  if (newPet) {
    console.log(newPet.name);
  }
});

/**
 * $fetch
 * 
 * Direct fetch without SSR hydration.
 */
async function handleFetch() {
  try {
    const result = await getPetById({
      composable: '$fetch',
      onRequest: [
        () => {
          console.log('onRequest: local');
        },
      ],
      onResponse: [
        () => {
          console.log('onResponse: local');
        },
      ],
      path: {
        petId,
      },
    });
    console.log(result);
  } catch (error) {
    console.log(error);
  }
}

async function addNewPet() {
  name.value = name.value === 'foo' ? 'bar' : 'foo';

  const pet = await addPet({
    body: {
      category: {
        id: BigInt(0),
        name: 'cats',
      },
      id: BigInt(0),
      name: 'doggy',
      photoUrls: ['string'],
      status: 'available',
      tags: [
        {
          id: BigInt(0),
          name: 'string',
        },
      ],
    },
    composable: '$fetch',
  });

  console.log('Added new pet:', pet);
}
</script>

<template>
  <h1>Get Random Pet Nuxt APIs</h1>
  <div>
    <button @click="handleFetch" type="button">$fetch</button>
    <button @click="incrementPetId" type="button">increment petId</button>
    <button @click="changeStatus" type="button">change status</button>
    <button @click="addNewPet" type="button">add pet</button>
    <div>
      <p>id: {{ petId }}</p>
      <p>name: {{ name }}</p>
      <p>status: {{ status }}</p>
    </div>
  </div>
</template>