Ditch the Backend Boilerplate: Build Full-Stack Apps with Nuxt Server Routes

Want to build full-stack applications faster and easier? Forget setting up separate backend servers. With Nuxt Server Routes, you can create complete applications, directly connecting your frontend to a database.

This guide dives into Nuxt Server Routes, revealing their magic and demonstrating how to build a simple, database-driven app without the usual backend headaches.

🤔 What Makes Nuxt Server Routes So Awesome?

In Nuxt 3, any file you place within the /server directory automatically transforms into a server-side API endpoint.

Here's an example: Create a file named /server/api/hello.ts with the following code:

export default defineEventHandler(() => {
  return { message: 'Hello from the server!' }
})

Visiting /api/hello in your browser will instantly return:

{ "message": "Hello from the server!" }

Pretty cool, right? This simplicity unlocks a range of benefits:

• No Separate Backend Repo Needed: Streamline your project structure.
• Blazing-Fast API Development: Build endpoints with minimal code.
• Perfect for JAMstack: Ideal for modern, performant web architectures.
• TypeScript Support: Enjoy type safety out of the box.
• Ideal for "Backend-Lite" Apps: Perfect for blogs, dashboards, and SaaS MVPs.

Let's see how this plays out in a concrete example.

🟢 Hands-On: Building a Simple Notes App with Nuxt 3

Let’s create a minimal "Notes" application where users can create and view notes. We'll use Nuxt for both frontend and backend, Prisma as our ORM, and SQLite for a lightweight database – perfect for local development using Nuxt server-side rendering.

1. Set Up Your Nuxt App:

   npx nuxi init nuxt-notes-app
   cd nuxt-notes-app
   npm install
   

   Copy

2. Install Prisma and Initialize SQLite:

   npm install prisma @prisma/client
   npx prisma init --datasource-provider sqlite
   

   Copy

3. Configure Your Prisma Schema (prisma/schema.prisma):

   datasource db {
     provider = "sqlite"
     url      = "file:./dev.db"
   }
   
   generator client {
     provider = "prisma-client-js"
   }
   
   model Note {
     id    Int     @id @default(autoincrement())
     title String
     body  String
   }
   

4. Generate the Prisma Client:

   npx prisma generate
   npx prisma db push
   

   Copy

   This creates your database based on the schema.

5. Create the /server/api/notes/index.ts Route (Read Operation):

   import { PrismaClient } from '@prisma/client'
   const prisma = new PrismaClient()
   
   export default defineEventHandler(async (event) => {
     return await prisma.note.findMany()
   })
   

   Copy

6. Create the /server/api/notes/create.ts Route (Write Operation):

   import { PrismaClient } from '@prisma/client'
   const prisma = new PrismaClient()
   
   export default defineEventHandler(async (event) => {
     const body = await readBody(event)
     return await prisma.note.create({
       data: {
         title: body.title,
         body: body.body,
       },
     })
   })
   

   Copy

7. Build Your Homepage (/pages/index.vue):

   <script setup lang="ts">
   const notes = ref([])
   const newNote = ref({ title: '', body: '' })
   
   async function fetchNotes() {
     notes.value = await useFetch('/api/notes')
   }
   
   async function createNote() {
     await useFetch('/api/notes/create', {
       method: 'POST',
       body: newNote.value,
     })
     newNote.value = { title: '', body: '' }
     await fetchNotes()
   }
   
   onMounted(fetchNotes)
   </script>
   
   <template>
     <div>
       <h1>My Notes</h1>
       <form @submit.prevent="createNote">
         <input v-model="newNote.title" placeholder="Title" />
         <input v-model="newNote.body" placeholder="Body" />
         <button type="submit">Add Note</button>
       </form>
       <div v-for="note in notes" :key="note.id">
         <h2>{{ note.title }}</h2>
         <p>{{ note.body }}</p>
       </div>
     </div>
   </template>
   

🚀 Deployment: Effortless Simplicity

Platforms like Vercel and Netlify automatically detect the /server directory. No extra configuration is needed – just deploy!

Important: For production databases, consider using services like Railway, PlanetScale, or Supabase instead of local SQLite.

✅ Summary: Full-Stack Fun with Nuxt

Nuxt Server Routes offer a streamlined approach to full-stack development. They are perfect for side projects, MVPs, and even production applications that don't demand a complex backend. Embrace the simplicity and accelerate your development process.