├── .env.example ├── .gitignore ├── README.md ├── app.vue ├── components └── GameCard.vue ├── layouts └── default.vue ├── nuxt.config.ts ├── package-lock.json ├── package.json ├── pages ├── games │ └── [id].vue ├── index.vue └── resources.vue ├── public ├── 254x356-gamepad.png ├── favicon.ico ├── gaming-pc-logo.png └── video-game-system.jpg ├── server ├── api │ └── games │ │ ├── [...].js │ │ └── search.js └── tsconfig.json ├── tsconfig.json └── types ├── Game.ts ├── GameResults.ts └── Response.ts /.env.example: -------------------------------------------------------------------------------- 1 | NUXT_APP_BASE_URL='/OPTIONAL_BASE_URL' 2 | API_FETCH_BASE_URL=YOUR_DOMAIN/ 3 | 4 | EXTERNAL_API_KEY=YOUR_API_KEY 5 | API_BASE_URL=YOUR_BASE_URL -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Nuxt dev/build outputs 2 | .output 3 | .data 4 | .nuxt 5 | .nitro 6 | .cache 7 | dist 8 | 9 | # Node dependencies 10 | node_modules 11 | 12 | # Logs 13 | logs 14 | *.log 15 | 16 | # Misc 17 | .DS_Store 18 | .fleet 19 | .idea 20 | 21 | # Local env files 22 | .env 23 | .env.* 24 | !.env.example 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Nuxt 3 Minimal Starter 2 | 3 | Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. 4 | 5 | ## Setup 6 | 7 | Make sure to install the dependencies: 8 | 9 | ```bash 10 | # npm 11 | npm install 12 | 13 | # pnpm 14 | pnpm install 15 | 16 | # yarn 17 | yarn install 18 | 19 | # bun 20 | bun install 21 | ``` 22 | 23 | ## Development Server 24 | 25 | Start the development server on `http://localhost:3000`: 26 | 27 | ```bash 28 | # npm 29 | npm run dev 30 | 31 | # pnpm 32 | pnpm run dev 33 | 34 | # yarn 35 | yarn dev 36 | 37 | # bun 38 | bun run dev 39 | ``` 40 | 41 | ## Production 42 | 43 | Build the application for production: 44 | 45 | ```bash 46 | # npm 47 | npm run build 48 | 49 | # pnpm 50 | pnpm run build 51 | 52 | # yarn 53 | yarn build 54 | 55 | # bun 56 | bun run build 57 | ``` 58 | 59 | Locally preview production build: 60 | 61 | ```bash 62 | # npm 63 | npm run preview 64 | 65 | # pnpm 66 | pnpm run preview 67 | 68 | # yarn 69 | yarn preview 70 | 71 | # bun 72 | bun run preview 73 | ``` 74 | 75 | Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. 76 | -------------------------------------------------------------------------------- /app.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/GameCard.vue: -------------------------------------------------------------------------------- 1 | 22 | 23 | 37 | 38 | -------------------------------------------------------------------------------- /layouts/default.vue: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /nuxt.config.ts: -------------------------------------------------------------------------------- 1 | export default defineNuxtConfig({ 2 | devtools: { enabled: false }, 3 | modules: [ 4 | '@nuxtjs/tailwindcss', 5 | '@vueuse/nuxt', 6 | 'nuxt-lazy-load' 7 | ], 8 | runtimeConfig: { 9 | apiKey: process.env.EXTERNAL_API_KEY, 10 | apiBaseUrl: process.env.API_BASE_URL, 11 | public: { 12 | fetchBaseUrl: process.env.API_FETCH_BASE_URL 13 | } 14 | } 15 | }) 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-app", 3 | "private": true, 4 | "type": "module", 5 | "scripts": { 6 | "build": "nuxt build", 7 | "start": "node .output/server/index.mjs", 8 | "dev": "nuxt dev", 9 | "generate": "nuxt generate", 10 | "preview": "nuxt preview", 11 | "postinstall": "nuxt prepare" 12 | }, 13 | "devDependencies": { 14 | "@nuxtjs/tailwindcss": "^6.10.4", 15 | "@vueuse/nuxt": "^10.7.2", 16 | "nuxt": "^3.9.1", 17 | "vue": "^3.4.10", 18 | "vue-router": "^4.2.5" 19 | }, 20 | "dependencies": { 21 | "dotenv": "^16.3.1", 22 | "nuxt-lazy-load": "^3.0.4" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /pages/games/[id].vue: -------------------------------------------------------------------------------- 1 | 36 | 37 | -------------------------------------------------------------------------------- /pages/index.vue: -------------------------------------------------------------------------------- 1 | 75 | 76 | 103 | 104 | -------------------------------------------------------------------------------- /pages/resources.vue: -------------------------------------------------------------------------------- 1 | 192 | 193 | -------------------------------------------------------------------------------- /public/254x356-gamepad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cheekey0x/nuxt-3-video-game-search/1b2757b0d613f77057ddb770d8e313ded3e8b83c/public/254x356-gamepad.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cheekey0x/nuxt-3-video-game-search/1b2757b0d613f77057ddb770d8e313ded3e8b83c/public/favicon.ico -------------------------------------------------------------------------------- /public/gaming-pc-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cheekey0x/nuxt-3-video-game-search/1b2757b0d613f77057ddb770d8e313ded3e8b83c/public/gaming-pc-logo.png -------------------------------------------------------------------------------- /public/video-game-system.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/cheekey0x/nuxt-3-video-game-search/1b2757b0d613f77057ddb770d8e313ded3e8b83c/public/video-game-system.jpg -------------------------------------------------------------------------------- /server/api/games/[...].js: -------------------------------------------------------------------------------- 1 | export default defineEventHandler((event) => { 2 | const id = [...event.node.req.url.split("/")].pop(); 3 | const config = useRuntimeConfig(); 4 | 5 | return $fetch(`${config.apiBaseUrl}/game/${id}/?api_key=${config.apiKey}&format=json`); 6 | }); -------------------------------------------------------------------------------- /server/api/games/search.js: -------------------------------------------------------------------------------- 1 | export default defineEventHandler((event) => { 2 | const {query} = getQuery(event); 3 | const config = useRuntimeConfig(); 4 | 5 | return $fetch(`${config.apiBaseUrl}/search/?api_key=${config.apiKey}&query=${query}&format=json&limit=20`); 6 | }); -------------------------------------------------------------------------------- /server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../.nuxt/tsconfig.server.json" 3 | } 4 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | // https://nuxt.com/docs/guide/concepts/typescript 3 | "extends": "./.nuxt/tsconfig.json" 4 | } 5 | -------------------------------------------------------------------------------- /types/Game.ts: -------------------------------------------------------------------------------- 1 | export type Game = { 2 | id: string; 3 | name: string; 4 | genres: { 5 | genre: string; 6 | }[]; 7 | concepts: string, 8 | original_release_date: string; 9 | deck: string | null; 10 | summary: string; 11 | image: { 12 | original_url: string; 13 | }; 14 | } -------------------------------------------------------------------------------- /types/GameResults.ts: -------------------------------------------------------------------------------- 1 | export type GameResults = { 2 | results: { 3 | id: string; 4 | name: string; 5 | genres: { 6 | name: string; 7 | }[]; 8 | concepts: { 9 | id: string; 10 | name: string; 11 | }[]; 12 | original_release_date: string; 13 | deck: string | null; 14 | summary: string; 15 | image: { 16 | original_url: string; 17 | }; 18 | } 19 | } -------------------------------------------------------------------------------- /types/Response.ts: -------------------------------------------------------------------------------- 1 | import type { Game } from "./Game"; 2 | 3 | export type Response = { 4 | page: number; 5 | results: Game[]; 6 | total_pages: number; 7 | total_results: number; 8 | } --------------------------------------------------------------------------------