与 Nuxt 集成

¥Integration with Nuxt

我们可以使用 Nuxt 社区插件 nuxt-elysia，通过 Eden Treaty 在 Nuxt API 路由上设置 Elysia。

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

1. 使用以下命令安装插件：

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

2. 将 nuxt-elysia 添加到 Nuxt 配置中：

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

3. 在项目根目录下创建 api.ts：

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

4. 在你的 Nuxt 应用中使用 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>

这将自动设置 Elysia 在 Nuxt API 路由上运行。

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

前缀

¥Prefix

默认情况下，Elysia 将挂载在 /_api 上，但我们可以使用 nuxt-elysia 配置进行自定义。

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

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

这将把 Elysia 挂载到 /api 而不是 /_api。

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

更多配置，请参阅 nuxt-elysia

¥For more configuration, please refer to nuxt-elysia