(upbeat techno music)
- So, how did it go?
Did you have any problems completing the challenge?
Let's see how I solved it.
First, we'll have a look
at the API we want to use for this challenge.
It's a collection of high quality images.
And exploring the endpoint,
we can see a returns and area of objects
including collection of images in a specific category
with its title, description, and different image sizes
for us to use in the application.
With the API data in place,
let's head into the code.
In the code editor,
I will navigate to the pages directory.
And in here, I want to create a new file.
I'll right-click
and choose the new file option and call this file,
gallery.vue.
Next inside here, I'll bootstrap a new view
component using Vito extension to do this.
And it'll create for me a template,
script, and style section.
Next, I want to call out that I already gone ahead
to install the nuxt HTTP module
which we're going to be using to query the API endpoint.
I also included it in the nuxt config file,
as you see on line 41.
Now we have it available to use globally.
I'll head back into the gallery.vue file.
And in the template section, create a div.
Inside this div, I want to have two sections.
The first section would be a heading
that includes the title of this page
and a paragraph showing photo credits for the API
where we are getting the images from.
Right?
So here I'll see,
awesome image gallery.
Also like to include a paragraph that
says photo credits goes to pixel Ford-
pixelford.com.
Great.
And we want to also have a second section
and this would be,
we'll give you the class of grid here.
And let's leave it at that for now.
We'll come back to it.
Now in the script section on line 18,
I'll create a new name property for this component
and give our component a name of GalleryComponent.
Next I'll create an async function.
Call this asyncData.
In here, I want to pass in the HTTP module.
Next, I'll create a response here
with an await expression that uses the http.get method
to pull data from our API.
Right?
Now, just so that we are sure that
this actually returns some data,
I'm going to log this to the console.
I'll log the response we are getting
to the console and head to the browser.
Now we have one ES links arrow line 23,
and I'll fix that.
Now back to the browser,
I'll navigate to the gallery page.
And in here you see
that we have the heading that we included
but I'll inspect the console just to confirm we have data.
And we do, which is great.
Now I'll close this head back to the code editor.
Now, instead of console logging the response
what I'll do instead is return
and objects and give it a key
of images and pass the response as the value.
Great.
Now that we're returning images
we can actually use it in the templates.
So in the templates, in the grid section
I'll create a new div, give this a class of grid-item.
Now in here would be where we want to loop
over the images we are getting back.
So I'll create a v-for as well and say in images.
One thing you should always remember to do is add a key
for every v-for you create
The key here I would use is the id of each image.
Great.
Now, inside here I would include an image tag
and for the source I want to use
the smallest image you're getting
from this API.
So I need to actually bind this source
and call image.url_small_size.
Also every image should always include an alt description.
So I'll be using the title we get
in the API as the alt tag.
So I'd also bind the alt tag
and here call it image.title.
Next I'll include a paragraph
that takes the image description.
Nice.
So now that we've created this,
let's head to the browser to see what we have.
If I try refreshing this page
you'd see that we actually get some images.
We get the description and I'm sure we are also
getting the all stack included as you see here.
Right?
Sounds good.
But right now, this doesn't really reflect a gallery.
Like it looks like a plain page with just images listed.
So I would like to fix that.
I've already gone ahead to write the CSS
for the speech and I have provided it on GitHub for you
or you can as well,
go ahead and style it however you want.
Heading back to the code editor in the style section.
I'll copy over the styles that I created here.
And if I go back to the browser
we should actually see something different.
Now this looks more like a gallery
including the images and the description.
And there you go.
There, you have it.
You have a new gallery
with data coming from an external API.
This is just an example
of how you can pull data from any source
into your application using one of NOx data methods.