Integration with Nuxt

We can use nuxt-elysia, a community plugin for Nuxt, to setup Elysia on Nuxt API route with Eden Treaty.

1. Install the plugin with the following command:

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 } = await useAsyncData(async () => {
    const { data, error } = await $api.hello.get()

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

    return data
})
</script>

This will automatically setup Elysia to run on Nuxt API route automatically.

pnpm

If you use pnpm, pnpm doesn't auto install peer dependencies by default forcing you to install additional dependencies manually.

pnpm add @sinclair/typebox openapi-types

Prefix

By default, Elysia will be mounted on /_api but we can customize it with nuxt-elysia config.

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

This will mount Elysia on /api instead of /_api.

For more configuration, please refer to nuxt-elysia