Nuxt3 API (useApi)

Common config for useFetch

• ✨  Release Notes

Features

• Common config base url
• Auto apply token bearer
• Updating...

Quick Setup

1. Add @tamnt-work/nuxt3-api dependency to your project

# Using pnpm
pnpm add -D @tamnt-work/nuxt3-api

# Using yarn
yarn add --dev @tamnt-work/nuxt3-api

# Using npm
npm install --save-dev @tamnt-work/nuxt3-api

2. Add @tamnt-work/nuxt3-api to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: ["@tamnt-work/nuxt3-api"],

  // Api config (Optional)
  api: {
    baseUrl: "/api", // Default base url for all request
    tokenName: "access_token", // Default token name, auto save to cookies
  },
});

Usage

In your component, you can use look like useFetch, instead of useApi

Module is auto import by default, you can use anywhere

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

<script setup lang="ts">
type ResponseType = {
  userId: number;
  id: number;
  title: string;
  completed: boolean;
};

const data = ref<ResponseType | null>(null);

onMounted(async () => {
  const { data: res } = await useApi<ResponseType>("/todos/1");
  data.value = res.value;
});
</script>

Development

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release