Getting Started with Nuxt 3
This episode is for members only

Sign up to access "Getting Started with Nuxt 3" right now.

Get started
Already a member? Sign in to continue
Playing
18. Server API

Episodes

0%
Your progress
  • Total: 1h 15m
  • Played: 0m
  • Remaining: 1h 15m
Join or sign in to track your progress

Transcript

00:00
In NUX 3, we can really easily create API endpoints that serve any backend logic of your app.
00:07
We're not going to dive into any complex examples in this part. We're just going to look at how we can create these and look at a really simple counter example just to get the feel of how this is working. And we'll cover this in another series or in some other episodes.
00:19
So let's take a look at the most basic usage of this. So I'm going to go ahead and create a folder called server in the root directory just here. Inside of this folder, I'm going to create an API directory. This is where we're going to place any of the files that are going to serve as our API endpoints.
00:36
So let's just go and create a hello.js file in here first of all just to look at a really simple example. So from this file, we're going to go ahead and export out a function. And inside of here, we can return any data that we want to be represented in our API endpoint. So let's go ahead and just return an object here and say greeting and hello.
00:57
So just a standard kind of API response with a key and a value. So how do we access this in the browser? Well, let's go over to our app and do forward slash API slash and then the name of the file that we've created. So much like the convention when we create pages.
01:15
So if we do forward slash API slash hello, sure enough now we've got a JSON response back with our key and our value. And we can actually make a request to this from our templates which we're going to look at in a moment to actually get these values out. Or you could just use these as public APIs if you wanted to. So this is the most basic example of an API endpoint created really easily in Nuxt by creating a file inside of a server and API directory.
01:42
Let's look at a slightly more practical example of an increment. And we'll also talk a little bit about state as well and how this keeps state within our web server. So we're going to go ahead and create another file in here called increment.js. The purpose of this would just be to create an initial value, probably zero, then have an increment ability inside of here.
02:03
So we'll just increment this count and then we'll return the result. And we'll see how this looks by making a request from an actual page. So for this let's go ahead and do exactly what we did before, export a function. And then for now what we're just going to do is return a count in here and have this hardcoded.
02:22
Now we're going to make a request to this API endpoint from a page in our app. So let's create an increment.vue file. Let's go ahead and add in our template so we can actually see some data in here. And then let's go ahead and create our script with setup.
02:36
You can do this either way. Okay, so now we just want to make a request to this file. So let's go ahead and, again, grab out the data from a request. And, again, we can use useFetch. We've already covered this.
02:49
We just need to make a request to API slash increment. And we can actually dump this out. I'm just going to make sure we await on this as well. So let's do a console log on this data and see what we get when we run this page.
03:01
So if we come over to slash increment and we have a look at this. Of course, there is a slight issue because Nuxt is in beta at the time of recording that we need to just rerun npm run dev. And if we open up our developer tools really quickly, you can see over in the console,
03:20
we get this in here with, if we just go over to the value, count zero. So we're actually getting that data back from here that we can use to output in our template. So let's output that data in our template, and then we'll kind of drill down into that value. So let's just say data for starters.
03:37
And if we come over, there we go. We've got our count of zero. And, of course, in JavaScript, to access a property, we just do .count. There we go.
03:46
So we've got the zero counter inside of there. Now, let's just say that this was backend logic where we wanted to keep some sort of state. We're not going to use a database or anything here. But we want this count to increment every time we hit this page.
03:59
How is that going to work? If we just come over to increment.js, obviously, we're going to need some sort of variable in here, e.g., count. And in here, we can just go ahead and return that count value inside of here. That's going to have exactly the same effect.
04:13
If we give that a refresh, we still get zero. However, what we can do now is say count++ or count equals count plus one, and that will increment that count value. Now, if we just go over and we give this a refresh, this is now always going to be one.
04:29
That's just because every time we hit this endpoint, we're re-declaring count. And the endpoint is, of course, called by this function that we're returning. So if we take the count and we move it outside of here, this is actually going to persist this count value between requests. So if we just head back over now and give this a refresh, every time we refresh this for as long as our web server is running,
04:53
we're always going to have that number five kept up to date. So this is a very basic look at how we can create an API endpoint within Nuxt with just exporting a function, returning the data that we need, and declaring some sort of value that's persisted. Now, what you can also do inside of here, and we'll use this as an example,
05:13
is also get the request data and the response object as well if you need to modify anything about these. And if we come down here and just do a console.log on that request information, we'll be able to see that output in our terminal. So let's come over here and make a direct request to just API slash increment.
05:32
And if we come over here, you can see that we've got all of the information about the request, which could be useful to grab any of the information out here that you need. I'm not diving into this fully because we can look at a practical example another time. But this should give you a good idea about the server API files that you can create
05:48
and how you can create any backend logic in your app for your Nuxt apps. You won't use this all the time because most of the time you'll be making requests to external APIs or your own API, but it's there if you need it. We'll cover this another time in more detail.

Episode summary

In this episode, we explore how easy it is to create server-side API endpoints in a Nuxt 3 app. We start off by setting up a /server/api folder structure, which is where all API endpoint files will live. Then, we create our first endpoint with a super simple hello.js file that returns a JSON greeting. Accessing the endpoint is just a matter of visiting /api/hello in the browser – super straightforward!

Next, we move onto a slightly more practical example – a basic stateful counter. We make a new endpoint called increment.js that returns an incrementing number. Initially, we learn why re-declaring the counter doesn’t work for persisting state, and then we move the counter variable outside of the handler function, so it actually increments with each request (as long as the web server keeps running).

To make things more interactive, we also see how to make a fetch request from a Vue page (using useFetch) to grab API data and show it in the template. Finally, we touch on how you can access request and response objects if you need them, which opens the door to more advanced backend logic later on.

By the end of this episode, you’ll have a solid grasp of creating simple server-side endpoints in Nuxt, both for quick experiments and for wiring up your app with backend logic—but we’ll save more complex use-cases for future episodes!

Episode discussion

No comments, yet. Be the first!