Skip to content

Latest commit

 

History

History
60 lines (49 loc) · 1.06 KB

README.md

File metadata and controls

60 lines (49 loc) · 1.06 KB

Type-safe API layer for Nuxt.js 3

Type-safe API layer with Axios, Aspida, and composition api.

  1. Create a directory for each endpoint in /api directory
  2. Create an endpoint type definition file
  3. run yarn run build:api
  4. Access to the whole auto generated endpoints by useApi() composition

Example:

// api/types.ts
export type Post = {
  UserId: number
  title: string
  body: string
}

export type PostsListItem = {
  UserId: number
  id: number
  title: string
  body: string
}
// /api/posts/index.ts

import { DefineMethods } from 'aspida'
import { Post, PostsListItem } from '~/api/types'

export type Methods = DefineMethods<{
  get: {
    resBody: PostsListItem[]
  }
  post: {
    reqBody: Post
    resBody: Post
  }
}>
// app.vue

<template>
  <div>
    <h1>Hello World!</h1>
    <button @click="getPosts">Get Posts</button>
  </div>
</template>
<script lang="ts" setup>
const getPosts = async () => {
  const response = await useApi().posts.get()
}
</script>