related tags

Author: basicBrogrammer

components/ArticleCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="border-2 rounded-lg border-primary">
+  <div class="my-4 border-2 rounded-lg border-primary">
     <nuxt-link :to="{ name: 'blog-slug', params: { slug: article.slug } }">
       <div
         class="cover-img"

components/ArticleTag.vue

@@ -1,5 +1,7 @@
 <template>
-  <span :class="tag">{{ tag }}</span>
+  <nuxt-link :class="tag" :to="{ name: 'index', query: { tag } }">{{
+    tag
+  }}</nuxt-link>
 </template>
 
 <script>
@@ -14,12 +16,20 @@ export default {
 </script>
 
 <style scoped>
-span {
+a {
   @apply p-1 m-1 border-2 rounded-lg border-current font-mono;
 }
-span::before {
+a::before {
   content: '#';
 }
+.vue {
+  color: #35495e;
+  background-color: #41b883;
+}
+.github {
+  color: black;
+  background-color: white;
+}
 .react {
   color: #61dafb;
   background-color: #282c34;

pages/index.vue

@@ -13,9 +13,11 @@ import ArticleCard from '@/components/ArticleCard'
 
 export default {
   components: { ArticleCard },
-  async asyncData({ $content, params }) {
-    const articles = await $content('articles', params.slug)
+  watchQuery: ['tag'],
+  async asyncData({ $content, params, query }) {
+    const articles = await $content('articles')
       .only(['title', 'description', 'img', 'slug', 'tags', 'cover_image'])
+      .where({ tags: { $contains: query.tag || '' } })
       .sortBy('createdAt', 'asc')
       .fetch()