nuxt-pokedex: setup grid page

Author: paulcpk

pokedex-app/README.md

@@ -51,6 +51,13 @@ Breakdown:
 
 ### Nuxt.js
 
+Initial setup is quite straightforward. I like the fact the asset import can be managed centrally through `nuxt.config.js` instead of importing them form different components as with React/Next.js. 
+
+There's no clean implementation of the equivalent to `React.Fragment` (`<></>`), which seems odd since you're forced to use empty div-elements instead. (Some workarounds exist)[https://stackoverflow.com/questions/57901393/is-there-anything-like-react-fragment-in-vuejs-nuxtjs] but I would expect such a popular framework to feature this out of the box.
+
+
+
+
 Time to implement: ~ 0h
 
 ### SveleKit 

pokedex-app/nuxt-pokedex/components/Grid.vue

@@ -1,4 +1,58 @@
+
 <template>
-<br />
+  <div>
+    <p v-if="$fetchState.pending">Loading...</p>
+    <div class="grid-container">
+      <div class="grid-search">
+        <input
+          id="search-input"
+          class="input is-medium"
+          type="text"
+          placeholder="Search"
+        />
+      </div>
+      <div class="grid-wrapper">
+        <a v-for="(item, index) in data" :key="index">
+          <ItemCard :postId="getPostIdFromUrl(item.url)" :name="item.name" />
+        </a>
+      </div>
+      <button class="load-more button is-primary is-fullwidth">
+        Load More
+      </button>
+    </div>
+  </div>
 </template>
 
+<script>
+const FETCH_LIMIT = 30
+
+// eslint-disable-next-line no-unused-vars
+export function getPostIdFromUrl(url) {
+  return url.split('/').reverse()[1]
+}
+
+export default {
+  data() {
+    return {
+      data: [],
+      displayData: [],
+      searchValue: [],
+      page: 0,
+    }
+  },
+  async fetch() {
+    const response = await fetch(
+      `https://pokeapi.co/api/v2/pokemon?limit=${FETCH_LIMIT}&offset=${
+        this.page * FETCH_LIMIT
+      }`
+    ).then((res) => res.json())
+    this.data = [...this.data, ...response.results]
+    console.log('this.data', this.data)
+  },
+  methods: {
+    getPostIdFromUrl(url) {
+      return url.split('/').reverse()[1]
+    },
+  },
+}
+</script>

pokedex-app/nuxt-pokedex/components/ItemCard.vue

@@ -1,4 +1,22 @@
 <template>
-<br />
+  <div class="tile">
+    <figure class="image">
+      <img
+        :src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${postId}.png`"
+        :alt="name"
+      />
+    </figure>
+    <div class="content">
+      <h3>
+        <span class="prefix">#{{ postId }}:&nbsp;</span>
+        {{ name }}
+      </h3>
+    </div>
+  </div>
 </template>
 
+<script>
+export default {
+  props: ['name', 'postId'],
+}
+</script>

pokedex-app/nuxt-pokedex/components/Navigation.vue

@@ -1,14 +1,18 @@
 <template>
   <nav class="navigation container">
     <div class="logo">
-      <a class="" href="#">
-        <img alt="Pokedex App" :src="require(`~/assets/images/pokedex-logo.png`)" width="120" />
-      </a>
+      <NuxtLink to="/">
+        <img
+          alt="Pokedex App"
+          :src="require(`~/assets/images/pokedex-logo.png`)"
+          width="120"
+        />
+      </NuxtLink>
     </div>
 
     <div class="nav-items">
-      <a class="button is-ghost">Home</a>
-      <a class="button is-ghost">About</a>
+      <NuxtLink class="button is-ghost" to="/"> Home </NuxtLink>
+      <NuxtLink class="button is-ghost" to="/about"> About </NuxtLink>
     </div>
   </nav>
 </template>

pokedex-app/nuxt-pokedex/pages/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <Tutorial />
+  <Grid />
 </template>
 
 <script>