└── movieapp
    ├── .editorconfig
    ├── .gitignore
    ├── .prettierrc
    ├── README.md
    ├── assets
        ├── defaults.scss
        └── imgs
        │   └── movieHero.jpg
    ├── components
        ├── Hero.vue
        └── Loading.vue
    ├── jsconfig.json
    ├── layouts
        └── default.vue
    ├── nuxt.config.js
    ├── package-lock.json
    ├── package.json
    ├── pages
        ├── index.vue
        └── movies
        │   └── _movieid.vue
    ├── static
        └── favicon.ico
    └── store
        └── README.md


/movieapp/.editorconfig:
--------------------------------------------------------------------------------
 1 | # editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | charset = utf-8
 9 | trim_trailing_whitespace = true
10 | insert_final_newline = true
11 | 
12 | [*.md]
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/movieapp/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Node template
 3 | # Logs
 4 | /logs
 5 | *.log
 6 | npm-debug.log*
 7 | yarn-debug.log*
 8 | yarn-error.log*
 9 | 
10 | # Runtime data
11 | pids
12 | *.pid
13 | *.seed
14 | *.pid.lock
15 | 
16 | # Directory for instrumented libs generated by jscoverage/JSCover
17 | lib-cov
18 | 
19 | # Coverage directory used by tools like istanbul
20 | coverage
21 | 
22 | # nyc test coverage
23 | .nyc_output
24 | 
25 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
26 | .grunt
27 | 
28 | # Bower dependency directory (https://bower.io/)
29 | bower_components
30 | 
31 | # node-waf configuration
32 | .lock-wscript
33 | 
34 | # Compiled binary addons (https://nodejs.org/api/addons.html)
35 | build/Release
36 | 
37 | # Dependency directories
38 | node_modules/
39 | jspm_packages/
40 | 
41 | # TypeScript v1 declaration files
42 | typings/
43 | 
44 | # Optional npm cache directory
45 | .npm
46 | 
47 | # Optional eslint cache
48 | .eslintcache
49 | 
50 | # Optional REPL history
51 | .node_repl_history
52 | 
53 | # Output of 'npm pack'
54 | *.tgz
55 | 
56 | # Yarn Integrity file
57 | .yarn-integrity
58 | 
59 | # dotenv environment variables file
60 | .env
61 | 
62 | # parcel-bundler cache (https://parceljs.org/)
63 | .cache
64 | 
65 | # next.js build output
66 | .next
67 | 
68 | # nuxt.js build output
69 | .nuxt
70 | 
71 | # Nuxt generate
72 | dist
73 | 
74 | # vuepress build output
75 | .vuepress/dist
76 | 
77 | # Serverless directories
78 | .serverless
79 | 
80 | # IDE / Editor
81 | .idea
82 | 
83 | # Service worker
84 | sw.*
85 | 
86 | # macOS
87 | .DS_Store
88 | 
89 | # Vim swap files
90 | *.swp
91 | 


--------------------------------------------------------------------------------
/movieapp/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": false,
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/movieapp/README.md:
--------------------------------------------------------------------------------
 1 | # movieapp
 2 | 
 3 | ## Build Setup
 4 | 
 5 | ```bash
 6 | # install dependencies
 7 | $ npm install
 8 | 
 9 | # serve with hot reload at localhost:3000
10 | $ npm run dev
11 | 
12 | # build for production and launch server
13 | $ npm run build
14 | $ npm run start
15 | 
16 | # generate static project
17 | $ npm run generate
18 | ```
19 | 
20 | For detailed explanation on how things work, check out the [documentation](https://nuxtjs.org).
21 | 
22 | ## Special Directories
23 | 
24 | You can create the following extra directories, some of which have special behaviors. Only `pages` is required; you can delete them if you don't want to use their functionality.
25 | 
26 | ### `assets`
27 | 
28 | The assets directory contains your uncompiled assets such as Stylus or Sass files, images, or fonts.
29 | 
30 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/assets).
31 | 
32 | ### `components`
33 | 
34 | The components directory contains your Vue.js components. Components make up the different parts of your page and can be reused and imported into your pages, layouts and even other components.
35 | 
36 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/components).
37 | 
38 | ### `layouts`
39 | 
40 | Layouts are a great help when you want to change the look and feel of your Nuxt app, whether you want to include a sidebar or have distinct layouts for mobile and desktop.
41 | 
42 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/layouts).
43 | 
44 | 
45 | ### `pages`
46 | 
47 | This directory contains your application views and routes. Nuxt will read all the `*.vue` files inside this directory and setup Vue Router automatically.
48 | 
49 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/get-started/routing).
50 | 
51 | ### `plugins`
52 | 
53 | The plugins directory contains JavaScript plugins that you want to run before instantiating the root Vue.js Application. This is the place to add Vue plugins and to inject functions or constants. Every time you need to use `Vue.use()`, you should create a file in `plugins/` and add its path to plugins in `nuxt.config.js`.
54 | 
55 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/plugins).
56 | 
57 | ### `static`
58 | 
59 | This directory contains your static files. Each file inside this directory is mapped to `/`.
60 | 
61 | Example: `/static/robots.txt` is mapped as `/robots.txt`.
62 | 
63 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/static).
64 | 
65 | ### `store`
66 | 
67 | This directory contains your Vuex store files. Creating a file in this directory automatically activates Vuex.
68 | 
69 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/docs/2.x/directory-structure/store).
70 | 


--------------------------------------------------------------------------------
/movieapp/assets/defaults.scss:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600&display=swap');
 2 | 
 3 | * {
 4 |   margin: 0;
 5 |   padding: 0;
 6 |   box-sizing: border-box;
 7 |   font-family: 'Karla', sans-serif;
 8 |   scroll-behavior: smooth;
 9 | }
10 | 
11 | // app transitions
12 | .page-enter-active,
13 | .page-leave-active {
14 |   transition: opacity 0.5s;
15 | }
16 | .page-enter,
17 | .page-leave-to {
18 |   opacity: 0;
19 | }
20 | 
21 | .app {
22 |   background-color: #211f1f;
23 |   min-height: 100vh;
24 | }
25 | 
26 | .button {
27 |   display: inline-block;
28 |   text-decoration: none;
29 |   color: inherit;
30 |   padding: 8px 16px;
31 |   background-color: #c92502;
32 |   border: none;
33 |   color: #fff;
34 |   border-radius: 4px;
35 |   cursor: pointer;
36 |   transition: 0.3s ease all;
37 | 
38 |   &:hover {
39 |     background-color: #891b02;
40 |   }
41 | }
42 | 
43 | .button-light {
44 |   background-color: transparent;
45 |   border: 1px solid #c92502;
46 | 
47 |   &:hover {
48 |     border-color: transparent;
49 |   }
50 | }
51 | 
52 | .container {
53 |   max-width: 1400px;
54 |   margin: 0 auto;
55 | }
56 | 
57 | .loading {
58 |   height: 100vh;
59 |   width: 100%;
60 |   display: flex;
61 |   justify-content: center;
62 |   align-items: center;
63 | 
64 |   @keyframes circle-loading {
65 |     to {
66 |       transform: rotateZ(360deg);
67 |     }
68 |   }
69 | 
70 |   span {
71 |     display: block;
72 |     width: 70px;
73 |     height: 70px;
74 |     border-radius: 50%;
75 |     border: 2px solid transparent;
76 |     border-top-color: #fff;
77 |     animation: circle-loading 1200ms ease infinite;
78 |   }
79 | }
80 | 


--------------------------------------------------------------------------------
/movieapp/assets/imgs/movieHero.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnkomarnicki/movies-app-nuxtjs/76382c9f00dbb10e22edc2346b6fd52fb9091cca/movieapp/assets/imgs/movieHero.jpg


--------------------------------------------------------------------------------
/movieapp/components/Hero.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="hero">
 3 |     <img src="../assets/imgs/movieHero.jpg" alt="" />
 4 |     <div class="text-container">
 5 |       <div class="text">
 6 |         <span class="mini-heading">Now Stremaing</span>
 7 |         <h1><span>Now</span> Streaming</h1>
 8 |         <a href="#movie-grid" class="button">View Movies</a>
 9 |       </div>
10 |     </div>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: 'hero',
17 | }
18 | </script>
19 | 
20 | <style lang="scss" scoped>
21 | .hero {
22 |   height: 400px;
23 |   position: relative;
24 |   @media (min-width: 750px) {
25 |     height: 500px;
26 |   }
27 | 
28 |   &::after {
29 |     content: '';
30 |     position: absolute;
31 |     top: 0;
32 |     left: 0;
33 |     height: 100%;
34 |     width: 100%;
35 |     background-color: rgba(0, 0, 0, 0.6);
36 |   }
37 | 
38 |   img {
39 |     width: 100%;
40 |     height: 100%;
41 |     object-fit: cover;
42 |   }
43 | 
44 |   .text-container {
45 |     z-index: 99;
46 |     position: absolute;
47 |     top: 0;
48 |     margin: 0;
49 |     width: 100%;
50 |     height: 100%;
51 |     display: flex;
52 |     flex-direction: column;
53 |     justify-content: center;
54 | 
55 |     .text {
56 |       padding: 0 16px;
57 |       width: 100%;
58 |       max-width: 1400px;
59 |       margin: 0 auto;
60 |     }
61 | 
62 |     .mini-heading {
63 |       font-weight: 600;
64 |       font-size: 18px;
65 |       text-transform: uppercase;
66 |       color: #c92502;
67 |       margin-bottom: 8px;
68 |       @media (min-width: 750px) {
69 |         font-size: 22px;
70 |       }
71 |     }
72 | 
73 |     h1 {
74 |       color: #fff;
75 |       font-size: 64px;
76 |       font-weight: 200;
77 |       margin-bottom: 8px;
78 | 
79 |       @media (min-width: 750px) {
80 |         font-size: 84px;
81 |       }
82 | 
83 |       span {
84 |         font-weight: 500;
85 |       }
86 |     }
87 | 
88 |     .button {
89 |       font-size: 20px;
90 |       align-self: flex-start;
91 |     }
92 |   }
93 | }
94 | </style>
95 | 


--------------------------------------------------------------------------------
/movieapp/components/Loading.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="loading">
 3 |     <span></span>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {}
 9 | </script>
10 | 
11 | <style lang="scss" scoped>
12 | .loading {
13 |   height: 100vh;
14 |   width: 100%;
15 |   display: flex;
16 |   justify-content: center;
17 |   align-items: center;
18 | 
19 |   @keyframes circle-loading {
20 |     to {
21 |       transform: rotateZ(360deg);
22 |     }
23 |   }
24 | 
25 |   span {
26 |     display: block;
27 |     width: 70px;
28 |     height: 70px;
29 |     border-radius: 50%;
30 |     border: 2px solid transparent;
31 |     border-top-color: #fff;
32 |     animation: circle-loading 1200ms ease infinite;
33 |   }
34 | }
35 | </style>
36 | 


--------------------------------------------------------------------------------
/movieapp/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "baseUrl": ".",
 4 |     "paths": {
 5 |       "~/*": ["./*"],
 6 |       "@/*": ["./*"],
 7 |       "~~/*": ["./*"],
 8 |       "@@/*": ["./*"]
 9 |     }
10 |   },
11 |   "exclude": ["node_modules", ".nuxt", "dist"]
12 | }
13 | 


--------------------------------------------------------------------------------
/movieapp/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <!-- Keep alive stores Fetches, so it does recall the fetch -->
3 |   <div class="app">
4 |     <Nuxt keep-alive />
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/movieapp/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | export default {
 2 |   // Target: https://go.nuxtjs.dev/config-target
 3 |   target: 'server',
 4 | 
 5 |   // Global page headers: https://go.nuxtjs.dev/config-head
 6 |   head: {
 7 |     title: 'movieapp',
 8 |     htmlAttrs: {
 9 |       lang: 'en',
10 |     },
11 |     meta: [
12 |       { charset: 'utf-8' },
13 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
14 |       { hid: 'description', name: 'description', content: '' },
15 |       { name: 'format-detection', content: 'telephone=no' },
16 |     ],
17 |     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
18 |   },
19 | 
20 |   // Global CSS: https://go.nuxtjs.dev/config-css
21 |   css: ['@/assets/defaults.scss'],
22 | 
23 |   // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
24 |   plugins: [],
25 | 
26 |   // Auto import components: https://go.nuxtjs.dev/config-components
27 |   components: true,
28 | 
29 |   // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
30 |   buildModules: [],
31 | 
32 |   // Modules: https://go.nuxtjs.dev/config-modules
33 |   modules: [
34 |     // https://go.nuxtjs.dev/axios
35 |     '@nuxtjs/axios',
36 |   ],
37 | 
38 |   // Axios module configuration: https://go.nuxtjs.dev/config-axios
39 |   axios: {},
40 | 
41 |   // Build Configuration: https://go.nuxtjs.dev/config-build
42 |   build: {},
43 | }
44 | 


--------------------------------------------------------------------------------
/movieapp/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "movieapp",
 3 |   "version": "1.0.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "nuxt",
 7 |     "build": "nuxt build",
 8 |     "start": "nuxt start",
 9 |     "generate": "nuxt generate"
10 |   },
11 |   "dependencies": {
12 |     "@nuxtjs/axios": "^5.13.6",
13 |     "core-js": "^3.15.1",
14 |     "nuxt": "^2.15.7"
15 |   },
16 |   "devDependencies": {
17 |     "eslint-config-prettier": "^8.3.0",
18 |     "fibers": "^5.0.0",
19 |     "prettier": "^2.3.2",
20 |     "pug": "^3.0.2",
21 |     "pug-plain-loader": "^1.1.0",
22 |     "sass": "^1.38.0",
23 |     "sass-loader": "^10.2.0"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/movieapp/pages/index.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="home">
  3 |     <!-- Hero -->
  4 |     <Hero />
  5 | 
  6 |     <!-- Search -->
  7 |     <div class="container search">
  8 |       <input
  9 |         type="text"
 10 |         placeholder="Search"
 11 |         @keyup.enter="$fetch"
 12 |         v-model.lazy="searchInput"
 13 |       />
 14 |       <button v-show="searchInput !== ''" @click="clearSearch" class="button">
 15 |         Clear Search
 16 |       </button>
 17 |     </div>
 18 | 
 19 |     <!-- Loading Animation -->
 20 |     <Loading v-if="$fetchState.pending" />
 21 | 
 22 |     <!-- Movies -->
 23 |     <div v-else class="container movies">
 24 |       <!-- Search Results -->
 25 |       <div id="movie-grid" v-if="searchInput !== ''" class="movies-grid">
 26 |         <div
 27 |           class="movie"
 28 |           v-for="(movie, index) in searchedMovies"
 29 |           :key="index"
 30 |         >
 31 |           <div class="movie-img">
 32 |             <img
 33 |               :src="`https://image.tmdb.org/t/p/w500/${movie.poster_path}`"
 34 |               alt=""
 35 |             />
 36 |             <p class="review">{{ movie.vote_average }}</p>
 37 |             <p class="overview">{{ movie.overview }}</p>
 38 |           </div>
 39 |           <div class="info">
 40 |             <p class="title">
 41 |               {{ movie.title.slice(0, 25)
 42 |               }}<span v-if="movie.title.length > 25">...</span>
 43 |             </p>
 44 |             <p class="release">
 45 |               Released:
 46 |               {{
 47 |                 new Date(movie.release_date).toLocaleString('en-us', {
 48 |                   month: 'long',
 49 |                   day: 'numeric',
 50 |                   year: 'numeric',
 51 |                 })
 52 |               }}
 53 |             </p>
 54 |             <NuxtLink
 55 |               class="button button-light"
 56 |               :to="{ name: 'movies-id', params: { id: movie.id } }"
 57 |             >
 58 |               Get More Info
 59 |             </NuxtLink>
 60 |           </div>
 61 |         </div>
 62 |       </div>
 63 | 
 64 |       <!-- Now Streaming  -->
 65 |       <div id="movie-grid" v-else class="movies-grid">
 66 |         <div class="movie" v-for="(movie, index) in movies" :key="index">
 67 |           <div class="movie-img">
 68 |             <img
 69 |               :src="`https://image.tmdb.org/t/p/w500/${movie.poster_path}`"
 70 |               alt=""
 71 |             />
 72 |             <p class="review">{{ movie.vote_average }}</p>
 73 |             <p class="overview">{{ movie.overview }}</p>
 74 |           </div>
 75 |           <div class="info">
 76 |             <p class="title">
 77 |               {{ movie.title.slice(0, 25)
 78 |               }}<span v-if="movie.title.length > 25">...</span>
 79 |             </p>
 80 |             <p class="release">
 81 |               Released:
 82 |               {{
 83 |                 new Date(movie.release_date).toLocaleString('en-us', {
 84 |                   month: 'long',
 85 |                   day: 'numeric',
 86 |                   year: 'numeric',
 87 |                 })
 88 |               }}
 89 |             </p>
 90 |             <NuxtLink
 91 |               class="button button-light"
 92 |               :to="{ name: 'movies-movieid', params: { id: movie.id } }"
 93 |             >
 94 |               Get More Info
 95 |             </NuxtLink>
 96 |           </div>
 97 |         </div>
 98 |       </div>
 99 |     </div>
100 |   </div>
101 | </template>
102 | 
103 | <script>
104 | import axios from 'axios'
105 | export default {
106 |   name: 'home',
107 |   head() {
108 |     return {
109 |       title: 'Movie App - Latest Streaming Movie Info',
110 |       meta: [
111 |         {
112 |           hid: 'description',
113 |           name: 'description',
114 |           content: 'Get all the latest streaming movies in theaters & online',
115 |         },
116 |         {
117 |           hid: 'keywords',
118 |           name: 'keywords',
119 |           content: 'movies, stream, stremaing',
120 |         },
121 |       ],
122 |     }
123 |   },
124 | 
125 |   data() {
126 |     return {
127 |       movies: [],
128 |       searchedMovies: [],
129 |       searchInput: '',
130 |     }
131 |   },
132 | 
133 |   async fetch() {
134 |     if (this.searchInput === '') {
135 |       await this.getMovies()
136 |       return
137 |     }
138 | 
139 |     if (this.searchInput !== '') {
140 |       await this.searchMovies()
141 |     }
142 |   },
143 |   fetchDelay: 1000,
144 | 
145 |   methods: {
146 |     async getMovies() {
147 |       const data = axios.get(
148 |         `https://api.themoviedb.org/3/movie/now_playing?api_key=37ed43a4f8eaa2abd75f9283692947bc&language=en-US&page=1`
149 |       )
150 |       const result = await data
151 |       result.data.results.forEach((movie) => {
152 |         this.movies.push(movie)
153 |       })
154 |     },
155 | 
156 |     async searchMovies() {
157 |       const data = axios.get(
158 |         `https://api.themoviedb.org/3/search/movie?api_key=37ed43a4f8eaa2abd75f9283692947bc&language=en-US&page=1&query=${this.searchInput}`
159 |       )
160 |       const result = await data
161 |       result.data.results.forEach((movie) => {
162 |         this.searchedMovies.push(movie)
163 |       })
164 |     },
165 | 
166 |     clearSearch() {
167 |       this.searchInput = ''
168 |       this.searchedMovies = []
169 |     },
170 |   },
171 |   watch: {
172 |     searchInput() {
173 |       console.log(this.searchInput)
174 |     },
175 |   },
176 | }
177 | </script>
178 | 
179 | <style lang="scss">
180 | .home {
181 |   .loading {
182 |     padding-top: 120px;
183 |     align-items: flex-start;
184 |   }
185 | 
186 |   .search {
187 |     display: flex;
188 |     padding: 32px 16px;
189 | 
190 |     input {
191 |       max-width: 350px;
192 |       width: 100%;
193 |       padding: 12px 6px;
194 |       font-size: 14px;
195 |       border: none;
196 | 
197 |       &:focus {
198 |         outline: none;
199 |       }
200 |     }
201 | 
202 |     .button {
203 |       border-top-left-radius: 0;
204 |       border-bottom-left-radius: 0;
205 |     }
206 |   }
207 | 
208 |   .movies {
209 |     padding: 32px 16px;
210 |     .movies-grid {
211 |       display: grid;
212 |       column-gap: 32px;
213 |       row-gap: 64px;
214 |       grid-template-columns: 1fr;
215 |       @media (min-width: 500px) {
216 |         grid-template-columns: repeat(2, 1fr);
217 |       }
218 |       @media (min-width: 750px) {
219 |         grid-template-columns: repeat(2, 1fr);
220 |       }
221 |       @media (min-width: 1100px) {
222 |         grid-template-columns: repeat(4, 1fr);
223 |       }
224 | 
225 |       .movie {
226 |         position: relative;
227 |         display: flex;
228 |         flex-direction: column;
229 | 
230 |         .movie-img {
231 |           position: relative;
232 |           overflow: hidden;
233 | 
234 |           &:hover {
235 |             .overview {
236 |               transform: translateY(0);
237 |             }
238 |           }
239 | 
240 |           img {
241 |             display: block;
242 |             width: 100%;
243 |             height: 100%;
244 |           }
245 | 
246 |           .review {
247 |             position: absolute;
248 |             top: 0;
249 |             left: 0;
250 |             display: flex;
251 |             justify-content: center;
252 |             align-items: center;
253 |             width: 40px;
254 |             height: 40px;
255 |             background-color: #c92502;
256 |             color: #fff;
257 |             border-radius: 0 0 16px 0;
258 |             box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
259 |               0 2px 4px -1px rgba(0, 0, 0, 0.06);
260 |           }
261 | 
262 |           .overview {
263 |             line-height: 1.5;
264 |             position: absolute;
265 |             bottom: 0;
266 |             background-color: rgba(201, 38, 2, 0.9);
267 |             padding: 12px;
268 |             color: #fff;
269 |             transform: translateY(100%);
270 |             transition: 0.3s ease-in-out all;
271 |           }
272 |         }
273 | 
274 |         .info {
275 |           margin-top: auto;
276 |           .title {
277 |             margin-top: 8px;
278 |             color: #fff;
279 |             font-size: 20px;
280 |           }
281 | 
282 |           .release {
283 |             margin-top: 8px;
284 |             color: #c9c9c9;
285 |           }
286 | 
287 |           .button {
288 |             margin-top: 8px;
289 |           }
290 |         }
291 |       }
292 |     }
293 |   }
294 | }
295 | </style>
296 | 


--------------------------------------------------------------------------------
/movieapp/pages/movies/_movieid.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- Loading -->
  3 |   <Loading v-if="$fetchState.pending" />
  4 | 
  5 |   <!-- Movie Info -->
  6 |   <div v-else class="single-movie container">
  7 |     <NuxtLink class="button" :to="{ name: 'index' }"> Back </NuxtLink>
  8 |     <div class="movie-info">
  9 |       <div class="movie-img">
 10 |         <img
 11 |           :src="`https://image.tmdb.org/t/p/w500/${movie.poster_path}`"
 12 |           alt=""
 13 |         />
 14 |       </div>
 15 |       <div class="movie-content">
 16 |         <h1>Title: {{ movie.title }}</h1>
 17 |         <p class="movie-fact tagline">
 18 |           <span>Tagline:</span> "{{ movie.tagline }}"
 19 |         </p>
 20 |         <p class="movie-fact">
 21 |           <span>Released:</span>
 22 |           {{
 23 |             new Date(movie.release_date).toLocaleString('en-us', {
 24 |               month: 'long',
 25 |               day: 'numeric',
 26 |               year: 'numeric',
 27 |             })
 28 |           }}
 29 |         </p>
 30 |         <p class="movie-fact">
 31 |           <span>Duration:</span> {{ movie.runtime }} minutes
 32 |         </p>
 33 |         <p class="movie-fact">
 34 |           <span>Revenue:</span>
 35 |           {{
 36 |             movie.revenue.toLocaleString('en-us', {
 37 |               style: 'currency',
 38 |               currency: 'USD',
 39 |             })
 40 |           }}
 41 |         </p>
 42 |         <p class="movie-fact"><span>Overview:</span> {{ movie.overview }}</p>
 43 |       </div>
 44 |     </div>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script>
 49 | import axios from 'axios'
 50 | 
 51 | export default {
 52 |   name: 'singleMovie',
 53 | 
 54 |   async fetch() {
 55 |     await this.getSingleMovie()
 56 |   },
 57 | 
 58 |   // delay for fetching
 59 |   fetchDelay: 1000,
 60 | 
 61 |   head() {
 62 |     return {
 63 |       title: this.movie.title,
 64 |     }
 65 |   },
 66 | 
 67 |   data() {
 68 |     return {
 69 |       movie: '',
 70 |     }
 71 |   },
 72 |   methods: {
 73 |     async getSingleMovie() {
 74 |       const data = axios.get(
 75 |         `https://api.themoviedb.org/3/movie/${this.$route.params.id}?api_key=37ed43a4f8eaa2abd75f9283692947bc&language=en-US`
 76 |       )
 77 |       const result = await data
 78 |       this.movie = result.data
 79 |     },
 80 |   },
 81 | }
 82 | </script>
 83 | 
 84 | <style lang="scss">
 85 | .single-movie {
 86 |   color: #fff;
 87 |   min-height: 100vh;
 88 |   display: flex;
 89 |   flex-direction: column;
 90 |   justify-content: center;
 91 |   padding: 32px 16px;
 92 | 
 93 |   .button {
 94 |     align-self: flex-start;
 95 |     margin-bottom: 32px;
 96 |   }
 97 | 
 98 |   .movie-info {
 99 |     display: flex;
100 |     flex-direction: column;
101 |     align-items: center;
102 |     gap: 32px;
103 |     color: #fff;
104 |     @media (min-width: 800px) {
105 |       flex-direction: row;
106 |       align-items: flex-start;
107 |     }
108 |     .movie-img {
109 |       img {
110 |         max-height: 500px;
111 |         width: 100%;
112 | 
113 |         @media (min-width: 800px) {
114 |           max-height: 700px;
115 |           width: initial;
116 |         }
117 |       }
118 |     }
119 | 
120 |     .movie-content {
121 |       h1 {
122 |         font-size: 56px;
123 |         font-weight: 400;
124 |       }
125 | 
126 |       .movie-fact {
127 |         margin-top: 12px;
128 |         font-size: 20px;
129 |         line-height: 1.5;
130 | 
131 |         span {
132 |           font-weight: 600;
133 |           text-decoration: underline;
134 |         }
135 |       }
136 | 
137 |       .tagline {
138 |         font-style: italic;
139 |         span {
140 |           font-style: normal;
141 |         }
142 |       }
143 |     }
144 |   }
145 | }
146 | </style>
147 | 


--------------------------------------------------------------------------------
/movieapp/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/johnkomarnicki/movies-app-nuxtjs/76382c9f00dbb10e22edc2346b6fd52fb9091cca/movieapp/static/favicon.ico


--------------------------------------------------------------------------------
/movieapp/store/README.md:
--------------------------------------------------------------------------------
 1 | # STORE
 2 | 
 3 | **This directory is not required, you can delete it if you don't want to use it.**
 4 | 
 5 | This directory contains your Vuex Store files.
 6 | Vuex Store option is implemented in the Nuxt.js framework.
 7 | 
 8 | Creating a file in this directory automatically activates the option in the framework.
 9 | 
10 | More information about the usage of this directory in [the documentation](https://nuxtjs.org/guide/vuex-store).
11 | 


--------------------------------------------------------------------------------