Merge branch 'main' of github.com:harlan-zw/nuxt-seo into feat/docs-v…

…2-stable

nuxtseo.com/components/BouncingBots.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { useMouseInElement } from '@vueuse/core'
 import { onMounted, ref, useElementHover, useIntervalFn, watch } from '#imports'
+import { useMouseInElement } from '@vueuse/core'
 
 defineProps<{
   icon: string

nuxtseo.com/components/OgImage/Home.vue

@@ -78,7 +78,7 @@ const modules = useModuleList()
         </svg>
       </div>
       <div class="flex justify-center gap-7">
-        <UIcon v-for="(module, key) in modules" mode="svg" :key="key" dynamic class="text-blue-300 w-[100px] h-[100px]" :name="module.icon" />
+        <UIcon v-for="(module, key) in modules" :key="key" mode="svg" dynamic class="text-blue-300 w-[100px] h-[100px]" :name="module.icon" />
       </div>
       <div class="flex flex-row justify-center">
         <div class="flex justify-center items-center gap-3 flex-row text-[30px] text-purple-600 ">

nuxtseo.com/components/OgImage/Module.vue

@@ -64,7 +64,7 @@ const themeRgb = computed(() => {
     <div class="h-full w-full relative">
       <div class="flex flex-row justify-between items-center">
         <div class="text-[40px] flex items-center gap-3 flex-row">
-          <UIcon v-if="icon" class="text-blue-500 w-20 h-20"  mode="svg" dynamic :name="icon" />
+          <UIcon v-if="icon" class="text-blue-500 w-20 h-20" mode="svg" dynamic :name="icon" />
           <div>
             <div class="text-[40px] font-mono">
               {{ moduleName }}

nuxtseo.com/package.json

@@ -12,15 +12,15 @@
     "@iconify-json/logos": "^1.2.0",
     "@iconify-json/noto": "^1.2.0",
     "@iconify-json/ph": "^1.2.0",
-    "@iconify-json/simple-icons": "^1.2.1",
+    "@iconify-json/simple-icons": "^1.2.4",
     "@iconify-json/uil": "^1.2.0",
     "@nuxt/content": "^2.13.2",
     "@nuxt/devtools": "1.4.2",
     "@nuxt/image": "^1.8.0",
-    "@nuxt/scripts": "^0.8.5",
+    "@nuxt/scripts": "^0.9.4",
     "@nuxt/ui": "2.17.0",
     "@nuxt/ui-pro": "1.3.1",
-    "@vueuse/nuxt": "^11.0.3",
+    "@vueuse/nuxt": "^11.1.0",
     "nuxt": "3.13.1",
     "nuxt-lego": "^0.0.14",
     "nuxt-lodash": "^2.5.3",

nuxtseo.com/pages/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
+import { useScript } from '@unhead/vue'
 import { useElementHover, useTransition, useWindowScroll } from '@vueuse/core'
 import { ref } from 'vue'
-import { useScript } from '@unhead/vue'
 import { useModuleList } from '~/utils/data'
 
 definePageMeta({

package.json

@@ -1,8 +1,8 @@
 {
   "name": "@nuxtjs/seo",
   "type": "module",
-  "version": "2.0.0-rc.21",
-  "packageManager": "pnpm@9.9.0",
+  "version": "2.0.0-rc.23",
+  "packageManager": "pnpm@9.11.0",
   "description": "The all-in-one SEO layer for Nuxt 3.",
   "author": {
     "name": "Harlan Wilton",
@@ -38,37 +38,40 @@
     "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare .playground",
     "lint": "eslint . --fix",
     "release": "pnpm build && bumpp && pnpm -r publish --access public",
-    "test": "nuxi prepare .playground && vitest",
+    "test": "pnpm dev:prepare && vitest --run --exclude **/__runtime__ && pnpm test:runtime",
+    "test:runtime": "cd test/fixtures/basic && vitest --run",
     "typecheck": "npx vue-tsc --noEmit --strict"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.13.1",
+    "@nuxt/kit": "^3.13.2",
     "@nuxtjs/robots": "^4.1.7",
-    "@nuxtjs/sitemap": "6.0.1",
+    "@nuxtjs/sitemap": "^6.1.1",
     "defu": "^6.1.4",
-    "nuxt-link-checker": "^3.1.1",
-    "nuxt-og-image": "3.0.2",
+    "nuxt-link-checker": "^3.1.2",
+    "nuxt-og-image": "^3.0.3",
     "nuxt-schema-org": "^3.4.0",
     "nuxt-seo-experiments": "^4.0.1",
-    "nuxt-site-config": "^2.2.17",
-    "nuxt-site-config-kit": "^2.2.17",
+    "nuxt-site-config": "^2.2.18",
+    "nuxt-site-config-kit": "^2.2.18",
     "pkg-types": "^1.2.0",
     "ufo": "^1.5.4"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^3.6.0",
+    "@antfu/eslint-config": "^3.7.3",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/schema": "3.13.1",
+    "@nuxt/schema": "^3.13.2",
     "@nuxt/test-utils": "^3.14.2",
-    "@nuxt/ui": "^2.18.4",
-    "@nuxtjs/i18n": "^8.5.3",
-    "bumpp": "^9.5.2",
-    "eslint": "^9.10.0",
-    "execa": "^9.3.1",
+    "@nuxt/ui": "^2.18.6",
+    "@nuxtjs/i18n": "^8.5.5",
+    "@vue/test-utils": "^2.4.6",
+    "bumpp": "^9.6.1",
+    "eslint": "^9.11.1",
+    "execa": "^9.4.0",
+    "happy-dom": "^15.7.4",
     "nitropack": "^2.9.7",
-    "nuxt": "3.13.1",
-    "typescript": "5.6.2",
-    "vitest": "^2.1.0"
+    "nuxt": "^3.13.2",
+    "typescript": "^5.6.2",
+    "vitest": "^2.1.1"
   },
   "build": {
     "externals": [

src/module.ts

@@ -10,8 +10,8 @@ import {
 } from '@nuxt/kit'
 import { colors } from 'consola/utils'
 import { installNuxtSiteConfig } from 'nuxt-site-config-kit'
-import { readPackageJSON } from 'pkg-types'
 import { $fetch } from 'ofetch'
+import { readPackageJSON } from 'pkg-types'
 
 export interface ModuleOptions {
   /**

src/runtime/nitro/middleware/redirect.ts

@@ -1,6 +1,6 @@
+import { useNitroOrigin, useSiteConfig } from '#imports'
 import { defineEventHandler, sendRedirect, setHeader } from 'h3'
 import { joinURL } from 'ufo'
-import { useNitroOrigin, useSiteConfig } from '#imports'
 
 export default defineEventHandler((e) => {
   const siteConfig = useSiteConfig(e)

src/runtime/nuxt/composables/polyfills.ts

@@ -1,5 +1,5 @@
-import { ref } from 'vue'
 import { useSiteConfig } from '#imports'
+import { ref } from 'vue'
 
 export function useSchemaOrg() {}
 export function defineWebSite() {}

src/runtime/nuxt/composables/useBreadcrumbItems.ts

@@ -1,10 +1,6 @@
-import { withoutTrailingSlash } from 'ufo'
-import type { RouteMeta } from 'vue-router'
-import type { MaybeRefOrGetter } from 'vue'
-import { defu } from 'defu'
 import type { NuxtLinkProps } from 'nuxt/app'
-import { fixSlashes } from 'site-config-stack/urls'
-import { pathBreadcrumbSegments } from '../../pure/breadcrumbs'
+import type { MaybeRefOrGetter } from 'vue'
+import type { RouteMeta } from 'vue-router'
 import {
   computed,
   createSitePathResolver,
@@ -15,6 +11,10 @@ import {
   useSchemaOrg,
   useSiteConfig,
 } from '#imports'
+import { defu } from 'defu'
+import { fixSlashes } from 'site-config-stack/urls'
+import { withoutTrailingSlash } from 'ufo'
+import { pathBreadcrumbSegments } from '../../pure/breadcrumbs'
 
 interface NuxtUIBreadcrumbItem extends NuxtLinkProps {
   label: string
@@ -113,8 +113,6 @@ function titleCase(s: string) {
 
 export function useBreadcrumbItems(options: BreadcrumbProps = {}) {
   const router = useRouter()
-  const routes = router.getRoutes()
-
   const i18n = useI18n()
   const siteResolver = createSitePathResolver({
     canonical: true,
@@ -149,7 +147,7 @@ export function useBreadcrumbItems(options: BreadcrumbProps = {}) {
       segments.push(...options.append)
     return (segments.filter(Boolean) as BreadcrumbItemProps[])
       .map((item) => {
-        const route = routes.find(r => withoutTrailingSlash(r.path) === withoutTrailingSlash(item.to))
+        const route = router.resolve(item.to)?.matched?.[0] || router.currentRoute.value // fallback to current route
         const routeMeta = (route?.meta || {}) as RouteMeta & { title?: string, breadcrumbLabel: string }
         const routeName = route ? String(route.name || route.path) : (item.to === '/' ? 'index' : 'unknown')
         let [name] = routeName.split('___')

src/runtime/nuxt/logic/applyDefaults.ts

@@ -1,6 +1,5 @@
 import type { UseHeadOptions, UseSeoMetaInput } from '@unhead/vue'
 import type { QueryObject } from 'ufo'
-import { stringifyQuery } from 'ufo'
 import type { Ref } from 'vue'
 import {
   computed,
@@ -11,6 +10,7 @@ import {
   useSeoMeta,
   useSiteConfig,
 } from '#imports'
+import { stringifyQuery } from 'ufo'
 
 export function applyDefaults(i18n: { locale: Ref<string> }) {
   // get the head instance

src/runtime/nuxt/plugin/defaults.ts

@@ -1,9 +1,9 @@
-import { applyDefaults } from '../logic/applyDefaults'
 import {
   defineNuxtPlugin,
   ref,
   useSiteConfig,
 } from '#imports'
+import { applyDefaults } from '../logic/applyDefaults'
 
 export default defineNuxtPlugin({
   name: 'nuxt-seo:defaults',

src/runtime/nuxt/plugin/defaultsWaitI18n.ts

@@ -1,5 +1,5 @@
-import { applyDefaults } from '../logic/applyDefaults'
 import { defineNuxtPlugin, ref, useSiteConfig } from '#imports'
+import { applyDefaults } from '../logic/applyDefaults'
 
 export default defineNuxtPlugin({
   name: 'nuxt-seo:defaults',

src/runtime/nuxt/plugin/titles.ts

@@ -1,11 +1,11 @@
 import type { UseHeadOptions } from '@unhead/vue'
-import { withoutTrailingSlash } from 'ufo'
 import {
   computed,
   defineNuxtPlugin,
   useHead,
   useRoute,
 } from '#imports'
+import { withoutTrailingSlash } from 'ufo'
 
 function titleCase(s: string) {
   return s

test/fixtures/basic/__runtime__/breadcrumbs.nuxt.test.ts

@@ -0,0 +1,83 @@
+// @vitest-environment nuxt
+import { useBreadcrumbItems } from '#imports'
+import { mockNuxtImport } from '@nuxt/test-utils/runtime'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+
+const { useRouterMock } = vi.hoisted(() => {
+  return {
+    useRouterMock: vi.fn().mockImplementation(() => {
+      return {
+        resolve: vi.fn().mockImplementation((s: string) => {
+          if (s === '/') {
+            return { matched: [{ name: 'index', title: 'Home' }] }
+          }
+          return { matched: [{ name: 'unknown' }] }
+        }),
+        currentRoute: {
+          value: {
+            path: '/',
+          },
+        },
+      }
+    }),
+  }
+})
+
+mockNuxtImport('useRouter', () => {
+  return useRouterMock
+})
+
+afterEach(() => {
+  vi.resetAllMocks()
+})
+
+describe('useBreadcrumbItems', () => {
+  it('home', async () => {
+    const breadcrumbs = useBreadcrumbItems()
+    expect(breadcrumbs.value).toMatchInlineSnapshot(`
+    [
+      {
+        "ariaLabel": "Home",
+        "current": true,
+        "label": "Home",
+        "to": "/",
+      },
+    ]
+  `)
+  })
+  it('subpath', async () => {
+    // change the path
+    useRouterMock.mockImplementation(() => {
+      return {
+        currentRoute: {
+          value: {
+            path: '/subpath',
+          },
+        },
+        resolve(s: string) {
+          if (s === '/subpath') {
+            return { matched: [{ name: 'subpath', title: 'My subpath' }] }
+          }
+          return { matched: [{ name: 'index' }] }
+        },
+      }
+    })
+    const breadcrumbs = useBreadcrumbItems()
+    expect(breadcrumbs.value).toMatchInlineSnapshot(`
+      [
+        {
+          "ariaLabel": "Home",
+          "current": false,
+          "label": "Home",
+          "to": "/",
+        },
+        {
+          "ariaLabel": "Subpath",
+          "current": true,
+          "label": "Subpath",
+          "to": "/subpath",
+        },
+      ]
+    `)
+  })
+})

test/fixtures/basic/app.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <div>
+    <NuxtPage />
+  </div>
+</template>

test/fixtures/basic/nuxt.config.ts

@@ -0,0 +1,16 @@
+import NuxtSeo from '../../../src/module'
+
+export default defineNuxtConfig({
+  modules: [
+    NuxtSeo,
+    '@nuxt/test-utils/module',
+  ],
+
+  nitro: {
+    prerender: {
+      failOnError: false,
+    },
+  },
+
+  compatibilityDate: '2024-08-07',
+})

test/fixtures/basic/pages/about.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>about</h1>
+  </div>
+</template>

test/fixtures/basic/pages/index.vue

@@ -0,0 +1,5 @@
+<template>
+  <div>
+    <h1>home</h1>
+  </div>
+</template>

test/fixtures/basic/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../../.nuxt/tsconfig.json"
+}

test/fixtures/basic/vitest.config.ts

@@ -0,0 +1,3 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({})

test/generate.old.ts

@@ -1,6 +1,6 @@
-import { describe, expect, it } from 'vitest'
 import { createResolver } from '@nuxt/kit'
 import { $fetch, setup } from '@nuxt/test-utils'
+import { describe, expect, it } from 'vitest'
 
 const { resolve } = createResolver(import.meta.url)
 

test/nuxt/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../.nuxt/tsconfig.json"
+}