added movies page

.gitignore

@@ -0,0 +1,90 @@
+# Created by .ignore support plugin (hsz.mobi)
+### Node template
+# Logs
+/logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# next.js build output
+.next
+
+# nuxt.js build output
+.nuxt
+
+# Nuxt generate
+dist
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless
+
+# IDE / Editor
+.idea
+
+# Service worker
+sw.*
+
+# macOS
+.DS_Store
+
+# Vim swap files
+*.swp

components/MovieComponent.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="card" @click="viewOneMovie(movie.id)">
+    <nuxt-link class="card-image is-centered" :to="'/movie/'+movie.id">
+      <figure class="image is-3by5">
+        <img class="posterImage"
+             :src="$config.imgUrl + movie.poster_path"
+             :alt="movie.original_title"
+        />
+      </figure>
+    </nuxt-link>
+    <div class="card-content">
+      <div class="content">
+        {{ movie.overview }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MovieComponent",
+  props: ['movie'],
+}
+</script>
+
+<style scoped>
+
+</style>

jsconfig.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./*"],
+      "@/*": ["./*"],
+      "~~/*": ["./*"],
+      "@@/*": ["./*"]
+    }
+  },
+  "exclude": ["node_modules", ".nuxt", "dist"]
+}

layouts/default.vue

@@ -0,0 +1,3 @@
+<template>
+  <nuxt />
+</template>

layouts/movie.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h2>movie layout</h2>
+    <nuxt/>
+  </div>
+</template>
+
+<script>
+export default {}
+</script>
+
+<style scoped>
+
+</style>

nuxt.config.js

@@ -0,0 +1,45 @@
+export default {
+  // Global page headers: https://go.nuxtjs.dev/config-head
+  head: {
+    title: "movie-app-nuxt",
+    htmlAttrs: {
+      lang: "en"
+    },
+    meta: [
+      {charset: "utf-8"},
+      {name: "viewport", content: "width=device-width, initial-scale=1"},
+      {hid: "description", name: "description", content: ""}
+    ],
+    link: [{rel: "icon", type: "image/x-icon", href: "/favicon.ico"}]
+  },
+
+  // Global CSS: https://go.nuxtjs.dev/config-css
+  css: [],
+
+  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
+  plugins: [],
+
+  // Auto import components: https://go.nuxtjs.dev/config-components
+  components: true,
+
+  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
+  buildModules: ["@nuxtjs/dotenv"],
+
+  // Modules: https://go.nuxtjs.dev/config-modules
+  modules: [
+    // https://go.nuxtjs.dev/buefy
+    "nuxt-buefy",
+    // https://go.nuxtjs.dev/axios
+    "@nuxtjs/axios"
+  ],
+
+  // Axios module configuration: https://go.nuxtjs.dev/config-axios
+  axios: {},
+
+  // Build Configuration: https://go.nuxtjs.dev/config-build
+  build: {},
+  publicRuntimeConfig: {
+    baseUrl: "https://api.themoviedb.org/3",
+    imgUrl: "https://image.tmdb.org/t/p/w500"
+  }
+};

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "movie-app-nuxt",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "nuxt",
+    "build": "nuxt build",
+    "start": "nuxt start",
+    "generate": "nuxt generate"
+  },
+  "dependencies": {
+    "@nuxtjs/axios": "^5.13.1",
+    "core-js": "^3.9.1",
+    "nuxt": "^2.15.3",
+    "nuxt-buefy": "^0.4.4"
+  },
+  "devDependencies": {
+    "@nuxt/types": "^2.15.6",
+    "@nuxtjs/dotenv": "^1.4.1"
+  }
+}

pages/index.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="container">
+    <div class="columns is-mobile is-multiline is-centered">
+      <div class="column is-4" v-for="movie in movies" :key="movie.id">
+        <movie-component :movie="movie"/>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    movies: [],
+  }),
+
+  async fetch() {
+    console.log(
+      this.$config.baseUrl +
+      "/movie/now_playing?api_key=" +
+      process.env.MOVIEDB_API_KEY
+    );
+    const {data} = await this.$axios.get(
+      this.$config.baseUrl +
+      "/movie/now_playing?api_key=" +
+      process.env.MOVIEDB_API_KEY
+    );
+    this.movies = data.results;
+    console.log(this.movies);
+  },
+};
+</script>
+
+<style scoped>
+.flex {
+  display: flex;
+  flex-wrap: wrap;
+}
+</style>

pages/movie.vue

@@ -0,0 +1,15 @@
+<template>
+</template>
+
+<script>
+import movie from "~/layouts/movie";
+
+export default {
+  name: "movie.vue",
+  layout: 'movie'
+}
+</script>
+
+<style scoped>
+
+</style>

pages/movie/_id.vue

@@ -0,0 +1,13 @@
+<template>
+  <h1>hello</h1>
+</template>
+
+<script>
+export default {
+  name: "_id.vue"
+}
+</script>
+
+<style scoped>
+
+</style>