💻 | Working with Composition API and TypeScript

src/components/Skill.vue

@@ -2,7 +2,7 @@
   <div class="mb-3 mr-2 p-1 md:p-2 h-32 w-32 border-gray-900 dark:border-dark-200 border-2 duration-300 rounded-3xl hover:bg-opacity-25" :class="getColor">
     <div class="w-full h-full flex flex-col justify-center items-center">
       <div>
-        <img class="rounded-sm" alt="Skill Img" :src="require(`@/assets/img/skills/${cover}.png`)">
+        <img class="rounded-sm" alt="Skill Img" :src="getCoverLink">
       </div>
       <h1 class="md:text-lg text-md font-bold text-center">{{ skill }}</h1>
     </div>
@@ -36,8 +36,11 @@ export default {
   },
   setup(props: SkillProp) {
     const getColor = computed(() => `hover:bg-${props.color}-400`)
+    const getCoverLink = computed(() => require(`@/assets/images/skills/${props.cover}.png`))
+
     return {
-      getColor
+      getColor,
+      getCoverLink
     }
   }
 }