nuxtseo-layer-devtools 0.4.5 → 0.5.1

package/composables/checklist.ts

@@ -0,0 +1,486 @@
+import type { ChecklistItemDefinition, NuxtSEOModule } from 'nuxtseo-shared/const'
+import { computed, ref, toValue } from 'vue'
+import { installedModules } from './modules'
+import { appFetch } from './rpc'
+
+export interface ChecklistDetectResult {
+  passed: boolean
+  detail?: string
+}
+
+interface ChecklistItemWithDetect extends ChecklistItemDefinition {
+  detect: (data: Record<string, any>, ctx: DetectContext) => ChecklistDetectResult
+}
+
+interface DetectContext {
+  installedModuleSlugs: Set<string>
+  debugData: Map<string, Record<string, any>>
+}
+
+export interface ChecklistItemResult extends ChecklistItemDefinition {
+  passed: boolean
+  detail?: string
+}
+
+export interface ModuleChecklistResult {
+  moduleSlug: NuxtSEOModule['slug']
+  moduleLabel: string
+  moduleIcon: string
+  items: ChecklistItemResult[]
+  requiredPending: number
+  recommendedPending: number
+  totalPending: number
+}
+
+export interface ChecklistSummary {
+  total: number
+  passed: number
+  requiredPending: number
+  recommendedPending: number
+}
+
+// Debug endpoint paths for each module
+const DEBUG_ENDPOINTS: Partial<Record<NuxtSEOModule['slug'], string>> = {
+  'site-config': '/__site-config__/debug',
+  'robots': '/__robots__/debug.json',
+  'sitemap': '/__sitemap__/debug.json',
+  'og-image': '/__nuxt-og-image/debug.json',
+  'schema-org': '/__schema-org__/debug.json',
+}
+
+// Module slug used internally by devtools → catalog slug mapping
+const DEVTOOLS_NAME_TO_SLUG: Record<string, NuxtSEOModule['slug']> = {
+  'nuxt-robots': 'robots',
+  'sitemap': 'sitemap',
+  'nuxt-og-image': 'og-image',
+  'nuxt-schema-org': 'schema-org',
+  'nuxt-seo-utils': 'seo-utils',
+  'nuxt-link-checker': 'link-checker',
+  'nuxt-site-config': 'site-config',
+  'nuxt-ai-ready': 'ai-ready',
+  'nuxt-skew-protection': 'skew-protection',
+}
+
+const MODULE_META: Record<string, { label: string, icon: string }> = {
+  'site-config': { label: 'Site Config', icon: 'carbon:settings-check' },
+  'robots': { label: 'Robots', icon: 'carbon:bot' },
+  'sitemap': { label: 'Sitemap', icon: 'carbon:load-balancer-application' },
+  'og-image': { label: 'OG Image', icon: 'carbon:image-search' },
+  'seo-utils': { label: 'SEO Utils', icon: 'carbon:tools' },
+  'schema-org': { label: 'Schema.org', icon: 'carbon:chart-relationship' },
+}
+
+function isValidUrl(url?: string): boolean {
+  if (!url)
+    return false
+  return !url.includes('localhost') && !url.includes('127.0.0.1') && url.length > 0
+}
+
+// Checklist definitions with detection logic per module
+const CHECKLIST_DEFINITIONS: Partial<Record<NuxtSEOModule['slug'], ChecklistItemWithDetect[]>> = {
+  'site-config': [
+    {
+      id: 'site-url',
+      label: 'Site URL configured',
+      description: 'A production site URL is needed for canonical URLs, sitemaps, and OG images to work correctly.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/site-config/getting-started/how-it-works',
+      detect: (data) => {
+        const url = data?.config?.url || ''
+        const passed = isValidUrl(url)
+        return { passed, detail: passed ? url : 'Not set or using localhost' }
+      },
+    },
+    {
+      id: 'site-name',
+      label: 'Site name set',
+      description: 'Used for default meta tags, Schema.org, and OG tags across all modules.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/site-config/getting-started/how-it-works',
+      detect: (data) => {
+        const name = data?.config?.name || ''
+        const passed = !!name && name !== 'My Site'
+        return { passed, detail: passed ? name : 'Not configured' }
+      },
+    },
+    {
+      id: 'default-locale',
+      label: 'Default locale configured',
+      description: 'Ensures correct hreflang tags and locale-aware sitemaps when using i18n.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/site-config/guides/setting-site-config',
+      detect: (data) => {
+        const locale = data?.config?.defaultLocale
+        const passed = !!locale
+        return { passed, detail: passed ? locale : 'Not set' }
+      },
+    },
+    {
+      id: 'trailing-slash',
+      label: 'Trailing slash preference set',
+      description: 'Prevents duplicate content from inconsistent URL formats. Set explicitly to true or false.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/site-config/guides/setting-site-config',
+      detect: (data) => {
+        const trailingSlash = data?.config?.trailingSlash
+        const passed = typeof trailingSlash === 'boolean'
+        return { passed, detail: passed ? (trailingSlash ? 'Enabled' : 'Disabled') : 'Not explicitly set' }
+      },
+    },
+    {
+      id: 'robots-installed',
+      label: 'Robots module installed',
+      description: 'Controls crawling and indexing across all SEO modules. Strongly recommended.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/robots/getting-started/installation',
+      detect: (_data, ctx) => {
+        const passed = ctx.installedModuleSlugs.has('robots')
+        return { passed, detail: passed ? 'Installed' : 'Not installed' }
+      },
+    },
+  ],
+  'robots': [
+    {
+      id: 'no-validation-errors',
+      label: 'No robots.txt validation errors',
+      description: 'Your robots.txt should be free of syntax errors that could confuse crawlers.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/robots/getting-started/installation',
+      detect: (data) => {
+        const errors = data?.validation?.errors || []
+        const passed = errors.length === 0
+        return { passed, detail: passed ? 'No errors' : `${errors.length} error(s) found` }
+      },
+    },
+    {
+      id: 'ai-directives',
+      label: 'AI bot directives configured',
+      description: 'Configure how AI crawlers interact with your content using blockAiBots or content signal directives.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/robots/guides/ai-bots',
+      detect: (data) => {
+        const groups = data?.runtimeConfig?.groups || []
+        const hasContentSignal = groups.some((g: any) => g.contentSignal?.length || g.contentUsage?.length)
+        const aiAgents = ['gptbot', 'chatgpt-user', 'anthropic-ai', 'claudebot', 'claude-web', 'google-extended', 'ccbot']
+        const hasAiAgent = groups.some((g: any) =>
+          (g.userAgent || []).some((ua: string) => aiAgents.includes(ua.toLowerCase())),
+        )
+        const passed = hasContentSignal || hasAiAgent
+        return { passed, detail: passed ? (hasContentSignal ? 'Content signals configured' : 'AI agent rules configured') : 'No AI bot directives found' }
+      },
+    },
+    {
+      id: 'bot-detection',
+      label: 'Bot detection enabled',
+      description: 'Classify bots via headers and fingerprinting to reduce server load from non-SEO crawlers.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/robots/guides/bot-detection',
+      detect: (data) => {
+        const enabled = data?.runtimeConfig?.botDetection
+        return { passed: !!enabled, detail: enabled ? 'Enabled' : 'Disabled' }
+      },
+    },
+    {
+      id: 'sitemap-reference',
+      label: 'Sitemap referenced in robots.txt',
+      description: 'Crawlers use the Sitemap directive in robots.txt to discover your sitemap URL.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/robots/guides/robots-txt',
+      detect: (data) => {
+        const sitemaps = data?.validation?.sitemaps || []
+        const passed = sitemaps.length > 0
+        return { passed, detail: passed ? `${sitemaps.length} sitemap(s) referenced` : 'No sitemap directive found' }
+      },
+    },
+  ],
+  'sitemap': [
+    {
+      id: 'site-url-set',
+      label: 'Site URL set for sitemaps',
+      description: 'Sitemaps require an absolute site URL. Without it, URLs will use localhost in production.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/getting-started/installation',
+      detect: (data) => {
+        const url = data?.siteConfig?.url || ''
+        const passed = isValidUrl(url)
+        return { passed, detail: passed ? url : 'Site URL not configured' }
+      },
+    },
+    {
+      id: 'has-sources',
+      label: 'URL sources configured',
+      description: 'Add dynamic URL sources for CMS or database content so all pages appear in your sitemap.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/guides/dynamic-urls',
+      detect: (data) => {
+        const sources = data?.globalSources || []
+        const sitemaps = data?.sitemaps || {}
+        const userSources = sources.filter((s: any) => s.sourceType === 'user' || (s.context?.name && !s.context.name.startsWith('nuxt:')))
+        const sitemapUserSources = Object.values(sitemaps).flatMap((s: any) =>
+          (s.sources || []).filter((src: any) => src.sourceType === 'user'),
+        )
+        const totalUser = userSources.length + sitemapUserSources.length
+        const passed = totalUser > 0
+        return { passed, detail: passed ? `${totalUser} custom source(s)` : 'Only default app sources detected' }
+      },
+    },
+    {
+      id: 'no-source-errors',
+      label: 'No sitemap source errors',
+      description: 'All configured sitemap sources should resolve successfully.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/guides/dynamic-urls',
+      detect: (data) => {
+        const sources = data?.globalSources || []
+        const sitemaps = data?.sitemaps || {}
+        const allSources = [
+          ...sources,
+          ...Object.values(sitemaps).flatMap((s: any) => s.sources || []),
+        ]
+        const failures = allSources.filter((s: any) => s._isFailure || s.error)
+        const passed = failures.length === 0
+        return { passed, detail: passed ? 'All sources OK' : `${failures.length} source(s) failing` }
+      },
+    },
+    {
+      id: 'url-warnings',
+      label: 'No URL validation warnings',
+      description: 'URLs in your sitemap should follow best practices (no whitespace, lowercase, etc).',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/guides/best-practices',
+      detect: (data) => {
+        const sources = data?.globalSources || []
+        const sitemaps = data?.sitemaps || {}
+        const allSources = [
+          ...sources,
+          ...Object.values(sitemaps).flatMap((s: any) => s.sources || []),
+        ]
+        const warningCount = allSources.reduce((sum: number, s: any) => sum + (s._urlWarnings?.length || 0), 0)
+        const passed = warningCount === 0
+        return { passed, detail: passed ? 'No warnings' : `${warningCount} URL warning(s)` }
+      },
+    },
+  ],
+  'og-image': [
+    {
+      id: 'renderer',
+      label: 'Renderer installed',
+      description: 'A renderer (Takumi, Satori, or Browser) is required to generate OG images.',
+      level: 'required',
+      docsUrl: 'https://nuxtseo.com/docs/og-image/getting-started/installation',
+      detect: (data) => {
+        const compat = data?.compatibility || {}
+        const hasTakumi = compat.takumi && compat.takumi !== false
+        const hasSatori = compat.satori && compat.satori !== false
+        const hasBrowser = compat.browser && compat.browser !== false
+        const passed = hasTakumi || hasSatori || hasBrowser
+        const renderers = [hasTakumi && 'takumi', hasSatori && 'satori', hasBrowser && 'browser'].filter(Boolean)
+        return { passed, detail: passed ? `Available: ${renderers.join(', ')}` : 'No renderer installed' }
+      },
+    },
+    {
+      id: 'custom-template',
+      label: 'Custom OG template created',
+      description: 'Community templates are for development only. Create a custom template for production.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/og-image/guides/templates',
+      detect: (data) => {
+        const components = data?.componentNames || []
+        const appTemplates = components.filter((c: any) => c.category === 'app')
+        const communityTemplates = components.filter((c: any) => c.category === 'community')
+        const passed = appTemplates.length > 0
+        if (passed)
+          return { passed, detail: `${appTemplates.length} custom template(s)` }
+        if (communityTemplates.length > 0)
+          return { passed: false, detail: `${communityTemplates.length} community template(s), eject before production` }
+        return { passed: false, detail: 'No templates found' }
+      },
+    },
+  ],
+  'seo-utils': [
+    {
+      id: 'schema-org-installed',
+      label: 'Schema.org module installed',
+      description: 'Adds structured data to your pages, improving rich search results. Pairs well with SEO Utils.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/schema-org/getting-started/installation',
+      detect: (_data, ctx) => {
+        const passed = ctx.installedModuleSlugs.has('schema-org')
+        return { passed, detail: passed ? 'Installed' : 'Not installed' }
+      },
+    },
+    {
+      id: 'sitemap-installed',
+      label: 'Sitemap module installed',
+      description: 'Generates XML sitemaps so search engines can discover all your pages efficiently.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/sitemap/getting-started/installation',
+      detect: (_data, ctx) => {
+        const passed = ctx.installedModuleSlugs.has('sitemap')
+        return { passed, detail: passed ? 'Installed' : 'Not installed' }
+      },
+    },
+  ],
+  'schema-org': [
+    {
+      id: 'identity',
+      label: 'Identity configured',
+      description: 'Set up your Organization or Person identity for rich Schema.org knowledge graph results.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/schema-org/guides/setup-identity',
+      detect: (data) => {
+        const config = data?.runtimeConfig || {}
+        const identity = config.identity
+        if (!identity)
+          return { passed: false, detail: 'No identity set' }
+        const type = typeof identity === 'string' ? identity : identity['@type'] || 'Unknown'
+        const name = typeof identity === 'object' ? (identity.name || '') : ''
+        return { passed: true, detail: name ? `${type}: ${name}` : type }
+      },
+    },
+    {
+      id: 'robots-companion',
+      label: 'Robots module installed',
+      description: 'Robots module auto-excludes non-indexable paths from Schema.org output.',
+      level: 'recommended',
+      docsUrl: 'https://nuxtseo.com/docs/schema-org/getting-started/installation',
+      detect: (_data, ctx) => {
+        const passed = ctx.installedModuleSlugs.has('robots')
+        return { passed, detail: passed ? 'Installed' : 'Not installed' }
+      },
+    },
+  ],
+}
+
+const debugCache = ref<Map<string, Record<string, any>>>(new Map())
+const loading = ref(false)
+const evaluated = ref(false)
+
+function getInstalledSlugs(): Set<string> {
+  const slugs = new Set<string>()
+  for (const mod of toValue(installedModules)) {
+    const slug = DEVTOOLS_NAME_TO_SLUG[mod.name]
+    if (slug)
+      slugs.add(slug)
+  }
+  return slugs
+}
+
+async function fetchDebugData(): Promise<void> {
+  const fetch = toValue(appFetch)
+  if (!fetch)
+    return
+
+  const slugs = getInstalledSlugs()
+  const cache = new Map<string, Record<string, any>>()
+
+  const fetches = Object.entries(DEBUG_ENDPOINTS)
+    .filter(([slug]) => slugs.has(slug))
+    .map(async ([slug, endpoint]) => {
+      const data = await fetch(endpoint!).catch(() => null)
+      if (data)
+        cache.set(slug, data)
+    })
+
+  await Promise.all(fetches)
+  debugCache.value = cache
+}
+
+function evaluateModule(slug: NuxtSEOModule['slug'], ctx: DetectContext): ModuleChecklistResult | undefined {
+  const definitions = CHECKLIST_DEFINITIONS[slug]
+  if (!definitions?.length)
+    return undefined
+
+  const meta = MODULE_META[slug]
+  if (!meta)
+    return undefined
+
+  const data = debugCache.value.get(slug) || {}
+  const items: ChecklistItemResult[] = definitions.map((def) => {
+    const result = def.detect(data, ctx)
+    return {
+      id: def.id,
+      label: def.label,
+      description: def.description,
+      level: def.level,
+      docsUrl: def.docsUrl,
+      passed: result.passed,
+      detail: result.detail,
+    }
+  })
+
+  const requiredPending = items.filter(i => i.level === 'required' && !i.passed).length
+  const recommendedPending = items.filter(i => i.level === 'recommended' && !i.passed).length
+
+  return {
+    moduleSlug: slug,
+    moduleLabel: meta.label,
+    moduleIcon: meta.icon,
+    items,
+    requiredPending,
+    recommendedPending,
+    totalPending: requiredPending + recommendedPending,
+  }
+}
+
+const results = computed<ModuleChecklistResult[]>(() => {
+  const slugs = getInstalledSlugs()
+  const ctx: DetectContext = { installedModuleSlugs: slugs, debugData: debugCache.value }
+  const moduleResults: ModuleChecklistResult[] = []
+
+  // Evaluate in a consistent order
+  const orderedSlugs: NuxtSEOModule['slug'][] = ['site-config', 'robots', 'sitemap', 'og-image', 'schema-org', 'seo-utils']
+  for (const slug of orderedSlugs) {
+    if (!slugs.has(slug) && slug !== 'site-config')
+      continue
+    // Site config is always evaluated (it's the foundation)
+    const result = evaluateModule(slug, ctx)
+    if (result)
+      moduleResults.push(result)
+  }
+
+  return moduleResults
+})
+
+const summary = computed<ChecklistSummary>(() => {
+  let total = 0; let passed = 0; let requiredPending = 0; let recommendedPending = 0
+  for (const r of results.value) {
+    total += r.items.length
+    passed += r.items.filter(i => i.passed).length
+    requiredPending += r.requiredPending
+    recommendedPending += r.recommendedPending
+  }
+  return { total, passed, requiredPending, recommendedPending }
+})
+
+export function getModuleResult(slug: string): ModuleChecklistResult | undefined {
+  return results.value.find(r => r.moduleSlug === slug)
+}
+
+export function getModuleResultByName(devtoolsName: string): ModuleChecklistResult | undefined {
+  const slug = DEVTOOLS_NAME_TO_SLUG[devtoolsName]
+  if (!slug)
+    return undefined
+  return getModuleResult(slug)
+}
+
+export async function evaluate(): Promise<void> {
+  if (loading.value)
+    return
+  loading.value = true
+  await fetchDebugData().catch(() => {})
+  evaluated.value = true
+  loading.value = false
+}
+
+export function useSetupChecklist() {
+  return {
+    results,
+    summary,
+    loading,
+    evaluated,
+    evaluate,
+    getModuleResult,
+    getModuleResultByName,
+  }
+}

package/composables/modules.ts

@@ -1,5 +1,7 @@
 import type { NuxtDevtoolsIframeClient } from '@nuxt/devtools-kit/types'
+import type { NuxtSEOModule } from 'nuxtseo-shared/const'
 import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
+import { modules as seoModules } from 'nuxtseo-shared/const'
 import { computed, ref } from 'vue'
 import { isConnected } from './state'
 
@@ -17,22 +19,51 @@ export interface SeoModuleCatalogEntry {
   icon: string
   installed: boolean
   route?: string
-  npmUrl: string
+  npm: string
+  repo: string
   pro?: boolean
+  playgrounds?: Record<string, string>
 }
 
-// Full catalog of all Nuxt SEO modules for the splash screen
-const MODULE_CATALOG: Omit<SeoModuleCatalogEntry, 'installed' | 'route'>[] = [
-  { name: 'nuxt-robots', title: 'Robots', description: 'Manage robots.txt and meta robots', icon: 'carbon:bot', npmUrl: 'https://npmjs.com/package/@nuxtjs/robots' },
-  { name: 'sitemap', title: 'Sitemap', description: 'Generate XML sitemaps', icon: 'carbon:load-balancer-application', npmUrl: 'https://npmjs.com/package/@nuxtjs/sitemap' },
-  { name: 'nuxt-og-image', title: 'OG Image', description: 'Generate dynamic Open Graph images', icon: 'carbon:image-search', npmUrl: 'https://npmjs.com/package/nuxt-og-image' },
-  { name: 'nuxt-schema-org', title: 'Schema.org', description: 'Add structured data with Schema.org', icon: 'carbon:chart-relationship', npmUrl: 'https://npmjs.com/package/nuxt-schema-org' },
-  { name: 'nuxt-seo-utils', title: 'SEO Utils', description: 'Core SEO utilities and meta tags', icon: 'carbon:search-locate', npmUrl: 'https://npmjs.com/package/nuxt-seo-utils' },
-  { name: 'nuxt-link-checker', title: 'Link Checker', description: 'Find and fix broken links', icon: 'carbon:cloud-satellite-link', npmUrl: 'https://npmjs.com/package/nuxt-link-checker' },
-  { name: 'nuxt-site-config', title: 'Site Config', description: 'Shared site configuration', icon: 'carbon:settings', npmUrl: 'https://npmjs.com/package/nuxt-site-config' },
-  { name: 'nuxt-ai-ready', title: 'AI Ready', description: 'Optimize for AI search engines', icon: 'carbon:machine-learning-model', npmUrl: 'https://npmjs.com/package/nuxt-ai-ready', pro: true },
-  { name: 'nuxt-skew-protection', title: 'Skew Protection', description: 'Protect against deployment skew', icon: 'carbon:shield-check', npmUrl: 'https://npmjs.com/package/nuxt-skew-protection', pro: true },
-]
+// Map slug to the internal module name used by devtools routing
+const SLUG_TO_MODULE_NAME: Record<string, string> = {
+  'robots': 'nuxt-robots',
+  'sitemap': 'sitemap',
+  'og-image': 'nuxt-og-image',
+  'schema-org': 'nuxt-schema-org',
+  'seo-utils': 'nuxt-seo-utils',
+  'link-checker': 'nuxt-link-checker',
+  'site-config': 'nuxt-site-config',
+  'ai-ready': 'nuxt-ai-ready',
+  'skew-protection': 'nuxt-skew-protection',
+  'ai-kit': 'nuxt-ai-kit',
+  'nuxt-seo': 'nuxt-seo',
+}
+
+const ICONIFY_RE = /^i-([^-]+)-/
+
+function toIconify(icon: string): string {
+  // Convert i-carbon-bot -> carbon:bot
+  return icon.replace(ICONIFY_RE, '$1:')
+}
+
+function moduleToCatalogEntry(mod: NuxtSEOModule): Omit<SeoModuleCatalogEntry, 'installed' | 'route'> {
+  return {
+    name: SLUG_TO_MODULE_NAME[mod.slug] || mod.slug,
+    title: mod.label,
+    description: mod.description,
+    icon: toIconify(mod.icon),
+    npm: mod.npm,
+    repo: mod.repo,
+    pro: mod.pro,
+    playgrounds: mod.playgrounds,
+  }
+}
+
+// Exclude the meta 'nuxt-seo' entry from the catalog, it's not a standalone devtools module
+const MODULE_CATALOG = seoModules
+  .filter(m => m.slug !== 'nuxt-seo')
+  .map(moduleToCatalogEntry)
 
 export const installedModules = ref<SeoModuleInfo[]>([])
 export const showModuleSplash = ref(false)
@@ -48,6 +79,10 @@ export const moduleCatalog = computed<SeoModuleCatalogEntry[]>(() => {
   })
 })
 
+export function findModuleByName(moduleName: string): SeoModuleCatalogEntry | undefined {
+  return moduleCatalog.value.find(m => m.name === moduleName)
+}
+
 export function fetchInstalledModules(): void {
   const inIframe = window.parent !== window
   if (!inIframe)

package/composables/package-manager.ts

@@ -0,0 +1,41 @@
+import { ref } from 'vue'
+
+export type PackageManager = 'pnpm' | 'yarn' | 'bun' | 'npm'
+
+export const packageManager = ref<PackageManager>('npm')
+
+const PM_COMMANDS: Record<PackageManager, { run: string, exec: string, update: string, dedupe: string }> = {
+  pnpm: { run: 'pnpm', exec: 'pnpm dlx', update: 'pnpm update', dedupe: 'pnpm dedupe' },
+  yarn: { run: 'yarn', exec: 'yarn dlx', update: 'yarn upgrade', dedupe: 'yarn dedupe' },
+  bun: { run: 'bun', exec: 'bunx', update: 'bun update', dedupe: '' },
+  npm: { run: 'npm', exec: 'npx', update: 'npm update', dedupe: 'npm dedupe' },
+}
+
+export function pmCommands() {
+  return PM_COMMANDS[packageManager.value]
+}
+
+// Detect by checking lock files via Vite's @fs route (dev only)
+const LOCK_FILES: [string, PackageManager][] = [
+  ['pnpm-lock.yaml', 'pnpm'],
+  ['yarn.lock', 'yarn'],
+  ['bun.lockb', 'bun'],
+]
+
+let detected = false
+export function detectPackageManager() {
+  if (detected)
+    return
+  detected = true
+
+  // Check each lock file with a HEAD request
+  for (const [file, pm] of LOCK_FILES) {
+    fetch(`/${file}`, { method: 'HEAD' })
+      .then((r) => {
+        if (r.ok) {
+          packageManager.value = pm
+        }
+      })
+      .catch(() => {})
+  }
+}

package/composables/update-check.ts

@@ -0,0 +1,39 @@
+import type { ComputedRef } from 'vue'
+import { computed, ref } from 'vue'
+
+export interface ModuleUpdateInfo {
+  currentVersion: string
+  latestVersion: string
+  hasUpdate: boolean
+}
+
+const updateCache = ref<Record<string, ModuleUpdateInfo>>({})
+
+export function useModuleUpdate(npmPackage: string | undefined, currentVersion: string | undefined): { hasUpdate: ComputedRef<boolean>, latestVersion: ComputedRef<string | undefined>, info: ComputedRef<ModuleUpdateInfo | undefined> } {
+  const info = computed(() => {
+    if (!npmPackage || !currentVersion)
+      return undefined
+    return updateCache.value[npmPackage]
+  })
+
+  const hasUpdate = computed(() => info.value?.hasUpdate ?? false)
+  const latestVersion = computed(() => info.value?.latestVersion)
+
+  if (npmPackage && currentVersion && !updateCache.value[npmPackage]) {
+    fetch(`https://registry.npmjs.org/${npmPackage}/latest`)
+      .then(r => r.json())
+      .then((data) => {
+        const latest = data.version as string
+        if (!latest)
+          return
+        updateCache.value[npmPackage] = {
+          currentVersion,
+          latestVersion: latest,
+          hasUpdate: latest !== currentVersion,
+        }
+      })
+      .catch(() => {})
+  }
+
+  return { hasUpdate, latestVersion, info }
+}

package/error.vue

@@ -5,6 +5,7 @@ const { error } = defineProps<{
   error: NuxtError
 }>()
 
+// eslint-disable-next-line no-control-regex
 const ANSI_RE = /\u001B\[[0-9;]*m/g
 
 const stack = computed(() => {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxtseo-layer-devtools",
   "type": "module",
-  "version": "0.4.5",
+  "version": "0.5.1",
   "description": "Shared Nuxt layer for Nuxt SEO devtools clients.",
   "author": {
     "name": "Harlan Wilton",
@@ -36,7 +36,8 @@
     "@vueuse/nuxt": "^14.2.1",
     "ofetch": "^1.5.1",
     "shiki": "^4.0.2",
-    "ufo": "^1.6.3"
+    "ufo": "^1.6.3",
+    "nuxtseo-shared": "0.9.0"
   },
   "devDependencies": {
     "nuxt": "^4.4.2",