feat: remove prettier configuration and add oxfmt configuration

.github/workflows/ci.yml

@@ -21,13 +21,13 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v7
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
         with:
           cache: true
 
@@ -46,13 +46,13 @@ jobs:
       contents: write
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v7
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
         with:
           cache: true
 
@@ -85,13 +85,13 @@ jobs:
       contents: write
 
     steps:
-      - uses: actions/checkout@v6
+      - uses: actions/checkout@v7
 
-      - uses: actions/setup-node@v6
+      - uses: actions/setup-node@v7
         with:
           node-version: lts/*
 
-      - uses: pnpm/action-setup@v4
+      - uses: pnpm/action-setup@v6
         with:
           cache: true
 

.vscode/extensions.json

@@ -2,7 +2,7 @@
   "recommendations": [
     "Vue.volar",
     "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode",
+    "oxc.oxc-vscode",
     "EditorConfig.EditorConfig",
     "bradlc.vscode-tailwindcss",
     "antfu.iconify"

.vscode/settings.json

@@ -5,8 +5,9 @@
     "package.json": "pnpm*"
   },
   "editor.codeActionsOnSave": {
-    "source.fixAll": "always"
+    "source.fixAll": "explicit"
   },
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "oxc.fmt.configPath": "oxfmt.config.ts",
+  "editor.defaultFormatter": "oxc.oxc-vscode"
 }

app/components/OgImage/NuxtSeo.satori.vue

@@ -0,0 +1,65 @@
+<script setup>
+import { computed } from "vue";
+const props = defineProps({
+  colorMode: { type: String, required: false, default: "light" },
+  title: { type: String, required: false, default: "title" },
+  description: { type: String, required: false },
+  isPro: { type: Boolean, required: false }
+});
+const themeColor = computed(() => props.isPro ? "124, 58, 237" : "34, 197, 94");
+</script>
+
+<template>
+  <div
+    class="w-full h-full justify-center items-center relative p-10 lg:p-[60px] bg-white text-neutral-900 dark:bg-neutral-900 dark:text-neutral-50"
+  >
+    <!-- Gradient background -->
+    <div
+      class="absolute top-0 left-0 right-0 bottom-0" :style="{
+  backgroundImage: `radial-gradient(ellipse 100% 100% at 100% 100%, rgba(${themeColor}, 0.15) 0%, transparent 60%)`
+}"
+    />
+    <div
+      class="absolute top-0 left-0 right-0 bottom-0" :style="{
+  backgroundImage: `radial-gradient(ellipse 100% 100% at 0.1% 0.1%, rgba(${themeColor}, 0.1) 0%, transparent 50%)`
+}"
+    />
+
+    <div class="w-full flex-col justify-center relative items-center text-center gap-5 lg:gap-8">
+      <!-- Logo -->
+      <div class="flex items-center gap-1">
+        <svg viewBox="0 0 64 64" class="w-10 h-10 lg:w-16 lg:h-16">
+          <defs>
+            <linearGradient :id="isPro ? 'nsLine2' : 'nsLine1'" x1="0%" y1="100%" x2="100%" y2="0%">
+              <stop offset="0%" :stop-color="isPro ? '#7c3aed' : '#22c55e'" />
+              <stop offset="100%" :stop-color="isPro ? '#c4b5fd' : '#86efac'" />
+            </linearGradient>
+            <linearGradient :id="isPro ? 'nsFill2' : 'nsFill1'" x1="0%" y1="0%" x2="0%" y2="100%">
+              <stop offset="0%" :stop-color="isPro ? '#7c3aed' : '#22c55e'" stop-opacity="0.6" />
+              <stop offset="100%" :stop-color="isPro ? '#7c3aed' : '#22c55e'" stop-opacity="0" />
+            </linearGradient>
+          </defs>
+          <path d="M8 52 Q20 48 24 36 T40 20 T56 12 L56 56 L8 56 Z" :fill="`url(#${isPro ? 'nsFill2' : 'nsFill1'})`" />
+          <path d="M8 52 Q20 48 24 36 T40 20 T56 12" fill="none" :stroke="`url(#${isPro ? 'nsLine2' : 'nsLine1'})`" stroke-width="4" stroke-linecap="round" />
+          <circle cx="56" cy="12" r="6" :fill="`url(#${isPro ? 'nsLine2' : 'nsLine1'})`" />
+        </svg>
+        <span class="text-[32px] lg:text-[42px] font-bold tracking-tight">
+          Nuxt<span :class="isPro ? 'text-violet-500' : 'text-green-500'" class="ml-1">SEO{{ isPro ? " Pro" : "" }}</span>
+        </span>
+      </div>
+
+      <!-- Title -->
+      <h1
+        class="w-full justify-center text-center text-[48px] lg:text-[80px] font-bold m-0 leading-tight max-w-[700px] lg:max-w-[1000px]"
+        style="display: block; line-clamp: 3; text-overflow: ellipsis; text-wrap: balance;"
+      >
+        {{ title }}
+      </h1>
+
+      <!-- Description -->
+      <p v-if="description" class="text-[24px] lg:text-[32px] opacity-70 max-w-[650px] lg:max-w-[900px] leading-relaxed" style="display: block; line-clamp: 2; text-overflow: ellipsis;">
+        {{ description }}
+      </p>
+    </div>
+  </div>
+</template>

app/error.vue

@@ -27,6 +27,11 @@ const statusText = computed(() => {
 useHead({
   title: `${status.value} - ${statusText.value}`,
 })
+
+defineOgImage('nuxt-seo', {
+  title: props.error.statusCode.toString(),
+  description: props.error.statusText
+})
 </script>
 
 <template>

app/main.css

@@ -133,7 +133,7 @@
   --popover: var(--color-slate-50);
   --popover-foreground: var(--color-slate-900);
 
-  --primary: var(--color-green-600);
+  --primary: var(--color-green-700);
   --primary-foreground: var(--color-slate-50);
 
   --secondary: var(--color-blue-600);
@@ -146,16 +146,16 @@
   --accent-foreground: var(--color-slate-900);
 
   --destructive: var(--color-red-600);
-  --success: var(--color-green-600);
+  --success: var(--color-green-700);
 
   --border: var(--color-slate-200);
   --input: var(--color-slate-200);
-  --ring: var(--color-green-500);
+  --ring: var(--color-green-600);
 
   --chart-1: var(--color-blue-500);
   --chart-2: var(--color-blue-600);
   --chart-3: var(--color-purple-600);
-  --chart-4: var(--color-green-600);
+  --chart-4: var(--color-green-700);
   --chart-5: var(--color-slate-600);
 
   --sidebar: var(--color-slate-100);
@@ -168,7 +168,7 @@
   --sidebar-accent-foreground: var(--color-slate-900);
 
   --sidebar-border: var(--color-slate-200);
-  --sidebar-ring: var(--color-green-500);
+  --sidebar-ring: var(--color-green-600);
 }
 
 .dark {
@@ -181,7 +181,7 @@
   --popover: var(--color-slate-800);
   --popover-foreground: var(--color-slate-50);
 
-  --primary: var(--color-green-500);
+  --primary: var(--color-green-600);
 
   --secondary: var(--color-blue-500);
   --secondary-foreground: var(--color-slate-50);
@@ -193,11 +193,11 @@
   --accent-foreground: var(--color-slate-50);
 
   --destructive: var(--color-red-500);
-  --success: var(--color-green-500);
+  --success: var(--color-green-600);
 
   --border: var(--color-slate-700);
   --input: var(--color-slate-700);
-  --ring: var(--color-green-500);
+  --ring: var(--color-green-600);
 
   --sidebar: var(--color-slate-800);
   --sidebar-foreground: var(--color-slate-50);

app/pages/about.vue

@@ -7,7 +7,6 @@ useSeo({
     'Nuxt 4 starter template with TypeScript, Tailwind CSS, accessibility & SEO—ready for production.',
   url: 'https://nuxpert.vercel.app/about',
 })
-defineOgImageComponent('nuxt-seo')
 </script>
 
 <template>

app/pages/index.vue

@@ -11,7 +11,7 @@ useSeo({
   url: 'https://nuxpert.vercel.app/',
 })
 useSeoMeta({ titleTemplate: '' })
-defineOgImageComponent('nuxt-seo')
+defineOgImage('NuxtSeo')
 </script>
 
 <template>

nuxt.config.ts

@@ -12,7 +12,7 @@ export default defineNuxtConfig({
   vite: {
     plugins: [tailwindcss()],
     optimizeDeps: {
-      include: ['@vueuse/core'],
+      include: ['@vueuse/core', '@unhead/schema-org/vue', '@vueuse/core'],
     },
   },
 
@@ -22,11 +22,10 @@ export default defineNuxtConfig({
     '@nuxt/eslint',
     '@nuxt/icon',
     '@nuxt/fonts',
-    '@nuxt/a11y',
-    '@nuxtjs/seo',
     '@nuxtjs/color-mode',
     '@vueuse/nuxt',
     '@nuxtjs/fontaine',
+    '@nuxtjs/seo',
   ],
 
   icon: {
@@ -111,4 +110,4 @@ export default defineNuxtConfig({
       },
     },
   },
-})
+})