Deploy a Nuxt.js App with OpenClaw

Deploy a Nuxt.js frontend with an OpenClaw backend on Fly.io. This full-stack pattern works for AI-powered web apps.

Project Structure

/
├── nuxt.config.ts
├── server/
│   └── api/
│       └── chat.post.ts  # OpenClaw backend route
├── pages/
│   └── index.vue         # Frontend
└── fly.toml

Server Route (OpenClaw backend)

// server/api/chat.post.ts
import { openclaw } from '~/lib/openclaw'

export default defineEventHandler(async (event) => {
  const { message } = await readBody(event)
  const response = await openclaw.chat(message)
  return { response }
})

Frontend

<!-- pages/index.vue -->
<template>
  <div>
    <input v-model="message" placeholder="Ask me anything..." />
    <button @click="send">Send</button>
    <div v-if="response">{{ response }}</div>
  </div>
</template>

<script setup>
const message = ref('')
const response = ref('')

async function send() {
  const data = await $fetch('/api/chat', {
    method: 'POST',
    body: { message: message.value }
  })
  response.value = data.response
}
</script>

Deploy

npm run build
fly launch --no-deploy
fly secrets set OPENAI_API_KEY=sk-...
fly deploy