feat(nuxt): prepare for v4

Author: 27rogi

src/app.vue app/app.vue

@@ -10,7 +10,7 @@ const { public: { branch } } = useRuntimeConfig();
     class="[&_.colorful]:(align-top text-greenspring-500 font-bold)"
     m="x-auto"
     max="w-screen-2xl"
-    p="6"
+    p="y-4 x-6"
     u-text="brilliantsea-50/50"
   >
     <div>

src/assets/27.svg app/assets/27.svg

@@ -47,7 +47,7 @@ const links = [
         <NuxtLinkLocale
           :to="{ path }"
           u-text="hover:greenspring-500"
-          p="4"
+          p="4 first:r-0"
           leading="1px"
         >
           {{ $t(localePath) }}

src/assets/blobs.svg app/assets/blobs.svg

@@ -77,6 +77,7 @@ const socials = {
           u-text="0.8em"
           :color="skill.color"
           :icon="skill.icon"
+          size="10"
         />
       </div>
     </div>

src/components/page/Background.vue app/components/page/Background.vue

@@ -62,8 +62,6 @@ const skills = await useSkillStore().$state;
         </template>
         <div
           v-if="project.github && ghData"
-          :class="!project.leading ? 'card-gray/30 p-2': null"
-          p="1.5"
           leading="1.25rem"
           u-text="base brilliantsea-50"
         >
@@ -74,10 +72,12 @@ const skills = await useSkillStore().$state;
             gap="1.5"
             flex="~ items-center"
           >
-            <Icon name="ph:star-bold" />
-            {{ ghData.data.value?.stargazers_count }}
-            <Icon name="ph:git-fork-bold" />
-            {{ ghData.data.value?.forks }}
+            <UiBadge icon="ph:star-duotone" px="2">
+              {{ ghData.data.value?.stargazers_count }}
+            </UiBadge>
+            <UiBadge v-if="ghData.data.value?.forks > 0" icon="ph:git-fork-duotone" px="2">
+              {{ ghData.data.value?.forks }}
+            </UiBadge>
           </NuxtLink>
         </div>
       </div>

src/components/page/Footer.vue app/components/page/Footer.vue

@@ -10,6 +10,10 @@ defineProps({
     default: null,
     type: String,
   },
+  iconSize: {
+    default: "1.4em",
+    type: String,
+  },
   link: {
     default: null,
     type: String,
@@ -21,7 +25,8 @@ defineProps({
   <component
     :is="link ? NuxtLink : 'div'"
     :to="link ?? null"
-    p="2"
+    h="9"
+    :w="$slots.default ? 'inherit' : '9'"
     rounded="md"
     border="~ slate-300/30"
     u-text="sm"
@@ -32,6 +37,7 @@ defineProps({
       w="full"
       gap="2"
       flex="inline items-center shrink-1 justify-center"
+      h="full"
       align="middle"
     >
       <slot
@@ -42,7 +48,7 @@ defineProps({
         v-else-if="$props.icon"
         :name="$props.icon"
         rounded="md"
-        size="1.4em"
+        :size="$props.iconSize"
       />
       <p
         v-if="$slots.default"

src/components/page/NavBar.vue app/components/page/NavBar.vue

@@ -41,6 +41,7 @@ export default defineNuxtConfig({
     watcher: "parcel",
   },
   future: {
+    compatibilityVersion: 4,
     typescriptBundlerResolution: true,
   },
   i18n: {
@@ -121,7 +122,6 @@ export default defineNuxtConfig({
       branch: "v3",
     },
   },
-  srcDir: "src",
   typescript: {
     strict: true,
     // Causes some incompatabilities with nuxt-icons

src/components/page/index/Education.vue app/components/page/index/Education.vue

@@ -2,7 +2,7 @@
   "name": "nuxt-app",
   "private": true,
   "type": "module",
-  "packageManager": "[email protected].12",
+  "packageManager": "[email protected].13",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
@@ -13,20 +13,25 @@
     "lint:fix": "eslint . --fix"
   },
   "devDependencies": {
+    "@iconify-json/devicon": "^1.1.43",
+    "@iconify-json/mdi": "^1.1.66",
     "@iconify-json/ph": "^1.1.13",
+    "@iconify-json/simple-icons": "^1.1.106",
+    "@iconify-json/vscode-icons": "^1.1.35",
     "@nuxt/eslint": "^0.3.13",
-    "@nuxtjs/fontaine": "^0.4.2",
+    "@nuxtjs/fontaine": "^0.4.3",
     "@nuxtjs/i18n": "^8.3.1",
     "@pinia/nuxt": "latest",
-    "@stylistic/eslint-plugin": "^1.8.1",
-    "@types/bun": "^1.1.3",
-    "@unhead/addons": "^1.9.11",
-    "@unocss/eslint-config": "^0.59.4",
+    "@stylistic/eslint-plugin": "^2.2.1",
+    "@types/bun": "^1.1.4",
+    "@unhead/addons": "^1.9.13",
+    "@unocss/eslint-config": "^0.61.0",
     "@unocss/nuxt": "latest",
-    "browserslist": "^4.23.0",
-    "eslint": "^9.4.0",
+    "browserslist": "^4.23.1",
+    "eslint": "^9.5.0",
+    "eslint-plugin-sort": "^3.0.2",
     "lightningcss": "^1.25.1",
-    "nuxt": "^3.11.2",
+    "nuxt": "^3.12.2",
     "nuxt-delay-hydration": "^1.3.3",
     "nuxt-icon": "^1.0.0-beta.6",
     "nuxt-security": "^1.4.3",
@@ -36,16 +41,16 @@
     "typescript": "^5.4.5",
     "unocss-preset-autoprefixer": "^0.0.7",
     "vite-svg-loader": "^5.1.0",
-    "vue": "^3.4.27",
-    "vue-router": "^4.3.2",
-    "vue-tsc": "^2.0.19"
+    "vue": "^3.4.29",
+    "vue-router": "^4.3.3",
+    "vue-tsc": "^2.0.21"
   },
   "dependencies": {
     "@fontsource-variable/onest": "^5.0.4",
     "@fontsource-variable/unbounded": "^5.0.20",
     "@nuxt/image": "^1.7.0",
-    "@nuxt/types": "^2.17.3",
-    "@vueuse/nuxt": "^10.10.0",
+    "@nuxt/types": "^2.17.4",
+    "@vueuse/nuxt": "^10.11.0",
     "date-fns": "^3.6.0",
     "nuxt-payload-analyzer": "^0.1.4",
     "ufo": "^1.5.3"