Integration with Nuxt

On this page

1. Overview
2. pnpm
3. Prefix

1. Docs
2. Integration
3. Nuxt

Copy page

Integration with Nuxt

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

Community integration

Use a nuxt-elysia release that supports your Elysia version. Its setup and generated Eden client belong to the community package; verify that compatibility before using it with v2.

1. Install the plugin with the following command:

bun add elysia@rc @elysia/eden@next
bun add -d nuxt-elysia

2. Add nuxt-elysia to your Nuxt config:

export default defineNuxtConfig({
    modules: [
        'nuxt-elysia'
    ],
    nitro: {
        preset: 'bun'
    }
})

Tip

The nitro.preset: 'bun' configuration is recommended, not required. It tells Nuxt’s Nitro to use Bun as the server runtime instead of the default Node.js runtime.

3. Create api.ts in the project root:

api.ts

import { Elysia } from 'elysia'

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 set up Elysia to run on Nuxt API routes.

pnpm

If your pnpm configuration does not install peer dependencies, add the peers required by Elysia v2 explicitly:

pnpm add typebox exact-mirror openapi-types

Prefix

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

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

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

For more configuration options, please refer to nuxt-elysia.