Integration with Nuxt

Elysia can be integrated into a Nuxt project using the community plugin nuxt‑elysia, which automatically wires up Elysia on a Nuxt API route together with Eden Treaty.

1. Install the plugin

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

2. Add nuxt-elysia to your Nuxt config

export default defineNuxtConfig({
  modules: [
    'nuxt-elysia'
  ]
})

3. Create api.ts in the project root

export default () => new Elysia()
  .get('/hello', () => ({
    message: 'Hello world!'
  }))

4. Use Eden Treaty in your Nuxt app

<template>
  <div>
    <p>{{ data.message }}</p>
  </div>
</template>

<script setup lang="ts">
const { $api } = useNuxtApp()

const { data, error } = await useAsyncData(async () => {
  const { data, error } = await $api.hello.get()

  if (error) throw new Error('Failed to call API')

  return data
})
</script>

This setup automatically runs Elysia on a Nuxt API route.

Prefix

By default, Elysia is mounted under /_api, but you can customize this path using the nuxtElysia configuration:

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

This mounts Elysia on /api instead of /_api.

For further configuration options, see the nuxt‑elysia repository.