Update nuxt to version 4 (#92)

* Nuxt 3.17.4 and other dependencies updated

* Temporary fix (maybe) of the Inline Code

* Update nuxt to version 4

app/components/category/card.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  count: number
+}
+
+withDefaults(defineProps<Props>(), {
+  title: 'No title available',
+  count: 0,
+})
+
+// some random color for tags
+const color = [
+  '#dc2626',
+  '#d97706',
+  '#65a30d',
+  '#059669',
+  '#0891b2',
+  '#0284c7',
+  '#4f46e5',
+  '#7c3aed',
+  '#c026d3',
+  '#db2777',
+]
+
+// get a random number
+function getRandomInt(min: number, max: number) {
+  min = Math.ceil(min)
+  max = Math.floor(max)
+  return Math.floor(Math.random() * (max - min + 1)) + min
+}
+
+const picAColor = ref(`${color.at(getRandomInt(0, 8))}`)
+</script>
+
+<template>
+  <div
+    class="text-[#F1F2F4] px-5 py-3 rounded hover:underline rand-bg-color hover:scale-[1.05] transition-all duration-500"
+  >
+    <NuxtLink :to="`/categories/${title.toLocaleLowerCase()}`" class="text-lg font-extrabold">
+      <h1>#{{ title }}({{ count }})</h1>
+    </NuxtLink>
+  </div>
+</template>
+
+<style scoped>
+.rand-bg-color {
+  background-color: v-bind(picAColor);
+}
+</style>