Files
agent/.agent/skills/tech-stack/elysiajs/integrations/nuxt.md

1.1 KiB

Nuxt Integration

What It Is

Community plugin nuxt-elysia for Nuxt API routes with Eden Treaty.

Installation

bun add elysia @elysiajs/eden
bun add -d nuxt-elysia

Setup

  1. Add to Nuxt config:
export default defineNuxtConfig({
  modules: ['nuxt-elysia']
})
  1. Create api.ts at project root:
// api.ts
export default () => new Elysia()
  .get('/hello', () => ({ message: 'Hello world!' }))
  1. Use Eden Treaty:
<template>
  <div>
    <p>{{ data.message }}</p>
  </div>
</template>
<script setup lang="ts">
const { $api } = useNuxtApp()

const { data } = await useAsyncData(async () => {
  const { data, error } = await $api.hello.get()
  
  if (error) throw new Error('Failed to call API')
  
  return data
})
</script>

Auto-setup on Nuxt API route.

Prefix

Default: /_api. Customize:

export default defineNuxtConfig({
  nuxtElysia: {
    path: '/api'
  }
})

Mounts on /api instead of /_api.

See nuxt-elysia for more config.

pnpm

Manual install:

pnpm add @sinclair/typebox openapi-types