// Nuxt 4 - Automatic SSR
export default defineNuxtComponent({
  async setup() {
    const { data: post } = await useFetch("/api/blog/post")

    // SEO metadata
    useSeoMeta({
      title: () => `${post.value.title} | My Blog`,
      description: post.value.excerpt,
      ogTitle: post.value.title,
      ogDescription: post.value.excerpt,
      twitterCard: "summary_large_image",
    })

    return { post }
  },
})

// app/pages/blog/[slug].vue
<script setup lang="ts">
const route = useRoute()
const { data: post } = await useFetch(`/api/blog/${route.params.slug}`)

// JSON-LD Schema
useSchemaOrg([
  {
    '@type': 'BlogPosting',
    headline: post.value.title,
    description: post.value.excerpt,
    image: post.value.image,
    datePublished: post.value.publishedAt,
    dateModified: post.value.updatedAt,
    author: {
      '@type': 'Person',
      name: post.value.author.name,
    },
  },
])
</script>

// app/pages/sitemap.xml.ts
export default defineEventHandler(async () => {
  const posts = await queryCollection("blog").all()

  const sitemap = `
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
      ${posts
        .map(
          (post) => `
        <url>
          <loc>https://example.com/blog/${post.slug}</loc>
          <lastmod>${post.updatedAt}</lastmod>
          <changefreq>monthly</changefreq>
        </url>
      `,
        )
        .join("")}
    </urlset>
  `

  return sitemap
})

<!-- Optimize images -->
<template>
  <NuxtImg
    src="/hero-image.jpg"
    alt="Hero"
    width="1200"
    height="630"
    format="webp"
    quality="80"
    preload
    priority
  />
</template>

// Minimize JavaScript
// Use web workers for heavy computation
// Implement code splitting

<!-- Reserve space for images -->
<template>
  <div class="aspect-w-16 aspect-h-9">
    <img src="image.jpg" alt="Description" />
  </div>
</template>

// Use AI for keyword clustering
const keywords = await aiClusterKeywords([
  "web development",
  "frontend frameworks",
  "JavaScript tutorials",
])

// Returns related terms and search intent

# H1: Main Topic (include primary keyword)

## H2: Key Subtopics

- Cover related concepts
- Answer common questions
- Include semantic keywords

### H3: Detailed Points

- Provide examples
- Add code snippets
- Include data and statistics

import { generateMetaDescription } from "@/lib/ai-seo"

const metaDescription = await generateMetaDescription({
  title: "Complete Guide to Web Development",
  content: articleContent,
  keywords: ["web development", "frontend", "backend"],
  maxLength: 160,
})

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    "/blog/**": {
      isr: 3600, // Revalidate every hour
      cache: {
        maxAge: 3600,
        staleWhileRevalidate: 7200,
      },
    },
  },
})

<!-- Multi-language SEO -->
<script setup>
useSeoMeta({
  title: "My Blog",
  htmlAttrs: {
    lang: "en",
  },
  link: [
    { rel: "alternate", hreflang: "es", href: "/es/blog" },
    { rel: "alternate", hreflang: "fr", href: "/fr/blog" },
  ],
})
</script>

<script setup>
useSchemaOrg([
  {
    "@type": "BreadcrumbList",
    itemListElement: [
      {
        "@type": "ListItem",
        position: 1,
        name: "Home",
        item: "https://example.com/",
      },
      {
        "@type": "ListItem",
        position: 2,
        name: "Blog",
        item: "https://example.com/blog",
      },
    ],
  },
])
</script>

/* Mobile-first approach */
.container {
  @apply px-4 sm:px-6 lg:px-8;
}

.text {
  @apply text-base sm:text-lg lg:text-xl;
}

<template>
  <!-- Minimum 44x44px touch targets -->
  <button class="min-h-[44px] min-w-[44px] p-4">Click Me</button>
</template>

// Lazy load non-critical resources
const loadOnInteraction = () => {
  return import("./heavy-component.vue")
}

// Verify site ownership
useHead({
  meta: [
    { name: "google-site-verification", content: "your-verification-code" },
  ],
})

// app/plugins/web-vitals.ts
import { onCLS, onFID, onLCP } from "web-vitals"

export default defineNuxtPlugin(() => {
  onCLS(console.log)
  onFID(console.log)
  onLCP(console.log)
})

# Lighthouse CI
npm install -g @lhci/cli
lhci autorun

# Check Core Web Vitals
npx lighthouse https://example.com --view

<!-- ❌ Bad: Large unoptimized images -->
<img src="huge-image.jpg" />

<!-- ✅ Good: Optimized and responsive -->
<NuxtImg src="image.jpg" sizes="xs:100vw sm:800px" format="webp" />

<!-- ❌ Bad: No schema markup -->
<article>
  <h1>Blog Post Title</h1>
</article>

<!-- ✅ Good: With schema markup -->
<script setup>
useSchemaOrg([
  {
    "@type": "BlogPosting",
    headline: "Blog Post Title",
  },
])
</script>

// ❌ Bad: Unclear URLs
"/p?id=123&cat=blog"

// ✅ Good: Descriptive URLs
"/blog/seo-guide-2026"