We will be building a frontend website with Vue, Vue Router, and the RAWG API. We'll be getting practice with routing dynamically with vue-router
elements and with making API calls with axios
inside of Vue Lifecycle Methods. Try to think of this lab like a puzzle, where you'll be adding in the pieces we need to create a functioning website.
- API Documentation
- The endpoints (URL strings) we will be using with this API have been provided below. Starter code and component files have also been provided.
Head over to this link Here to get your own API key. You'll want to add this API key to a .env
and add the .env
file to your .gitignore
.
[GET] Search `https://api.rawg.io/api/games?key=${API_KEY}&search=${searchQuery}`
[GET] Genres `https://api.rawg.io/api/genres?key=${API_KEY}`
[GET] Game Details `https://api.rawg.io/api/games/${gameId}?key=${API_KEY}`
[GET] DLC `https://api.rawg.io/api/games/${gameId}/additions?key=${API_KEY}` (Bonus)
Fork
andclone
this repositorynpm i
to install dependencies
Let's take a look at the structure of the app we've just cloned. You've been provided with all of the components you'll need to complete this exercise.
Note: The app will show an error until Step 2
is complete.
Let's start with main.js
.
You can see that the router has already been wired up for you here. You'll just have to write your own routes.
Head over to router.js
. In here, we've scaffolded the Vue Router for you:
import { createWebHistory, createRouter } from "vue-router"
import HomePage from './pages/HomePage'
import GameDetails from './pages/GameDetails'
import ViewGames from './pages/ViewGames'
import AboutPage from './pages/AboutPage'
const routes = []
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
You'll need to create your own routes and add them to the routes
array utilizing the following table:
Component | Path | Name |
---|---|---|
HomePage | / | 'HomePage' |
ViewGames | /games | 'ViewGames' |
GameDetails | /details/:game_id | 'GameDetails' |
About | /about | 'About' |
In App.vue
, you're provided with the following:
<template>
<div id="app">
<header>
<!-- Nav Goes Here -->
</header>
<main>
<!-- Router View Goes Here -->
</main>
</div>
</template>
<script>
export default {
name: 'App',
components: {}
}
</script>
- You'll want to utilize the
NavBar
component and add it between the providedheader
tags. Remember to import the NavBar component and add it to yourcomponents
object. - Don't forget to use the
router-view
component as this is where our components will get rendered. You can add it in between the providedmain
tags.
In HomePage.vue
, you've been provided with a few methods and some initial state. In this component, you should fire an axios request that retrieves a list of genres in the getGenres
method. This method should be invoked once the component is mounted and should update the genre state.
- Once you've retrieved a list of genres from your API, iterate through the genre state and return a
GenreCard
for each item. - The
GenreCard
should accept the image and name of each genre as props. You'll need to wire these up in theGenreCard
component following the included prompts.
In HomePage.vue
, set up a form within the provided search
classed tag. It should be displayed above the provided h2
. This form should have an input and a button.
- The value of the input should be
searchQuery
handleChange
should be used to update thesearchQuery
state- The
@submit
event should fire thegetSearchResults
method which in turn should update thesearchResults
array. - The
searched
state should be updated totrue
once the results are retrieved. If the the state is true, conditionally render the provideddiv
with class ofgenres
to be hidden. The!
operator may be useful here.
Now that we have the search results in state, you'll want to bring in the GameCard
component in HomePage.vue
. You should return a new card for each item in the searchResults
array.
- You'll need to import the
GameCard
component. - Pass the name and image of the game as props.
- Display these props in the noted sections within
GameCard
. - Don't forget to declare which props it will be receiving.
Next we'll want to select a game and view the game details.
- Attach an
@click
event to theGameCard
component, it should trigger theselectGame
method.- Hint: You can invoke the method to provide the
gameId
during the@click
event.
- Hint: You can invoke the method to provide the
- The
selectGame
method should navigate you to/detail/:game_id
. Thegame_id
parameter gets replaced with the providedgameId
argument.- Hint:
this.$router.someMethodThatNavigates
may be useful here.
- Hint:
Once you've navigated to the GameDetails
component, you can now start wiring the component to display some information.
- Utilize the
getGameDetails
method to make a request to retrieve the game information by the game id. - Look at the props currently stored in the
Vue Devtools
. Utilize that to retrieve thegameId
and provide it to the request. - The
getGameDetails
method should be triggered once a component mounts.
Some JSX has been provided for you. You'll have creative freedom on what information to display here. The only requirements are the component must display:
- The cover image for the game
- The title of the game
Add a back button that allows you to go back to the home page.
Display a list of the game's most recent posts from its subreddit page in the GameDetails
component.
Create two pages for ViewPlatforms
and PlatformDetails
to display the platform information available through the API.
- Hint: This will likely require more components as well
For completion you must have:
- All parts of the lab completed not including the bonus. (Steps 1-8)
- Make the genres clickable, this should navigate you to a new page where it displays a list of games by that genre. (Hint: This will require a new route and axios call).
- The API endpoint should resemble the following:
https://api.rawg.io/api/games?genres=<genreid>&key=<your key>
- The API endpoint should resemble the following:
- This page should display each game and it's rating prominently and users should have the ability to sort games by rating.
- You should have a dropdown to sort the games either in descending or ascending order.
- This page must be professionally styled and match the theme of the current application.
Build the ability to paginate results for this page.