Now that we've got a couple of pages set up under our movies route, let's start fetching some data from an API in order to fill them out. We'll be using the OMD API, otherwise known as the Open Movie Database. This API is simple and free to use. All that's required to begin is setting up an API key so that the maintainers can do some rate limiting.
you can set up your API key using this link in their main now. com and set up your own. Let's take a quick look now at how the API works. com and then provide our API key as a query parameter.
Then we can provide a number of other parameters depending on what kind of response we want. The I parameter is for getting a particular movie from the database based on an IMDB ID. The T parameter is for searching a movie by a title. Alternately, we can also use the S parameter for searching.
Back in the code, let's put this API to good use. view, I'll start out by creating a form with an input in it. That way, our users can search for a movie by its title. Next, we'll set up a reactive ref in the script setup above to keep track of the query that the user searches for.
Once again, notice that I don't have to import ref. Because we're using Nuxt, it's automatically imported for me. Now let's bind query to the search input. Lastly, I'll listen to the submit event on our form, and then we'll call a custom function whenever the form is submitted.
Let's call that function search. Perfect. Now we need to actually make the request to the API. So how do we make an AJAX request in Nuxt?
Well, Nuxt already provides a utility function for us to use made exactly for this purpose. And it's automatically imported by default. The name of this function is dollar sign fetch. Dollar sign fetch is a wrapper function built around OhMyFetch.
And it works both on the client side and on the server side. It provides a number of handy features for us, like automatically parsing responses and stringifying data, but also works really great with Nuxt's API endpoints. And we'll see more on that in a later lesson. For now, we just need to pass the URL to the API in order to make a GET request.
Here, I've pasted in the URL with the API key already included. This was just for convenience, and since it's going to be exposed to the browser anyway, it's really not a big deal that I've included it here in this file. env. But to be honest, no matter what API key you provide to the API, we're all going to get back the same information anyway.
So it's really not that important that I keep this secret. Now, there are some API keys, of course, that you never want to expose in your browser or save to your repo. But this simply isn't one of them. All right, now I want to provide my search query inside of the URL as the S parameter.
Let's change out our double quotation marks here for tick marks so that we can interpolate the query. Awesome. Let's give this a try in the browser, and we can check things out in the dev tools to see what the request looks like. I'll open up my Network tab and then focus on just the AJAX request here.
Then let's search for maybe Batman and hit Search. Cool. Now we've got the request showing up inside of the DevTools. You can see that the initiator is actually OhMyFetch.
So there's that OhMyFetch dependency working under the hood. And if we take a look at the response, actually, let's take a look at the preview of the response. It'll be a little easier to digest. You can see that we have a search property on the return object.
And it's an array of all the different movies that match our search term. or at least the first tent. So they are paginated. We're not going to really handle any of that.
But you get the idea. There is a search that's an array. And each item in that array is a movie. That movie has a poster on it, a title, a type, which is movie.
I believe that could also be like show or something like that. And then that IMDB ID that we can use to fetch the individual movie. Awesome. view page.
Inside our search function, I'll destructure that search array from the result of our request. And since I have to await the result here, we will have to make our search function asynchronous. Next, I'll create another reactive ref, this time called movies. And it will start out as an empty array.
Then we can set movies to the search results. Now, we do have a error here on line five, but that's just TypeScript being a little too strict for us right now. I'll just remove the laying attribute from our script tag so that we can work with plain old JavaScript. Great.
Lastly, I'll just copy and paste the markup in here to loop over each of our movies and then display a poster of each of the movies wrapped in a NUX link so that when you click the poster, we can visit the proper page. Also notice the to parameter here on my NUX link. Instead of passing it a string slash movie slash whatever the ID of the movie I want to visit is, instead I've passed it an object. This works exactly the same as it does with View Router.
I've passed it the name of the route I want to visit and also the params, that is the ID in this case, of the route. And I've set it to the ID of the individual movie that's currently being looped over. Nice. Now let's give it a try again in the browser.
And this time the results show up on the page with a poster for each of the movies. If I click on one of those movies, we do in fact go to slash movies slash the proper ID. In summary, whenever you need to make an HTTP request in Nuxt three, you can use the built-in dollar sign fetch function. In the next lesson, we'll fetch the full movie data for the individual page.