How to Create API Routes in Nuxt | Full-Stack Web Dev #7
2This is Episode #7 of my Nuxt Full-Stack Web Development series.
In this video, I’ll show you how to create API routes in Nuxt using the /server/api directory. API routes let you build backend endpoints directly inside your Nuxt project, making it easy to handle data, fetch content, or process requests without setting up a separate backend. We’ll walk through creating a simple API endpoint and testing it in the browser.
What’s covered in this video:
Introduction to server/api in Nuxt
Creating your first API route
Returning JSON data from an endpoint
How to access API routes in your project
Subscribe to follow along with the rest of the series as we continue building this project step by step.
00:00 Intro & Recap of State Management
00:16 What Are API Routes?
00:39 Setting Up the server/api Folder
01:04 Understanding GET and POST Methods
01:29 Creating Your First API Endpoint (hello.ts)
01:55 Returning JSON from an Endpoint
02:25 Testing API Route in the Browser (/api/hello)
02:46 Simulating a Database with an Array
03:20 Fetching Data from an API in Nuxt
03:37 Using useFetch Instead of fetch
04:00 Configuring GET Requests with useFetch
04:26 Displaying Data on the Page
05:04 Rendering Data in a List with v-for
05:41 Adding Loading State with pending
06:34 Simulating a Delay in API Response
07:22 Running Fetch on Client vs Server (server:false)
07:51 Adding Error Handling with useFetch
08:33 Forcing and Displaying an Error
09:04 Cleaning Up and Restoring API Behavior
09:18 Wrap-Up & Next Steps