nuxt-seo-utils 7.0.2 → 7.0.4

package/LICENSE.md

@@ -1,9 +1,9 @@
-MIT License
-
-Copyright (c) 2024 Harlan Wilton
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+MIT License
+
+Copyright (c) 2024 Harlan Wilton
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -1,74 +1,74 @@
-<h1>nuxt-seo-utils</h1>
-
-[![npm version][npm-version-src]][npm-version-href]
-[![npm downloads][npm-downloads-src]][npm-downloads-href]
-[![License][license-src]][license-href]
-[![Nuxt][nuxt-src]][nuxt-href]
-
-Nuxt SEO Utils is a collection of defaults and utilities to improve your Nuxt site's discoverability and shareability.
-
-While there are several features covering many aspects of SEO, it covers important defaults such as [automatic canonical URLs](https://nuxtseo.com/learn/controlling-crawlers/canonical-urls) and
-[open graph tags](https://nuxtseo.com/learn/mastering-meta/open-graph).
-
-<p align="center">
-<table>
-<tbody>
-<td align="center">
-<sub>Made possible by my <a href="https://github.com/sponsors/harlan-zw">Sponsor Program 💖</a><br> Follow me <a href="https://twitter.com/harlan_zw">@harlan_zw</a> 🐦 • Join <a href="https://discord.gg/275MBUBvgP">Discord</a> for help</sub><br>
-</td>
-</tbody>
-</table>
-</p>
-
-## Features
-
-- ▲ Next.js inspired [Metadata Files](https://nextjs.org/docs/app/api-reference/file-conventions/metadata)
-- ✨ Use SEO meta in your nuxt.config (`app.seoMeta`) and route rules
-- 🤖 Adds meta tags (`og:title`, `og:description`, etc.) from page title and description
-- 🧙 Correct tags that need to be absolute (i.e `og:image`)
-- 🧩 Site config template params `useHead({ title: '%site.title' })`
-- 🍞 Breadcrumb composable
-- 🧙 Best practice defaults and enhanced titles
-
-## Installation
-
-Install `nuxt-seo-utils` dependency to your project:
-
-```bash
-npx nuxi@latest module add nuxt-seo-utils
-```
-
-💡 Need a complete SEO solution for Nuxt? Check out [Nuxt SEO](https://nuxtseo.com).
-
-## Documentation
-
-[📖 Read the full documentation](https://nuxtseo.com/docs/utils) for more information.
-
-## Demos
-
-[Basic](https://stackblitz.com/edit/nuxt-starter-vbay3q?file=app.vue)
-
-## Sponsors
-
-<p align="center">
-  <a href="https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg">
-    <img src='https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg'/>
-  </a>
-</p>
-
-## License
-
-Licensed under the [MIT license](https://github.com/harlan-zw/nuxt-seo-utils/blob/main/LICENSE.md).
-
-<!-- Badges -->
-[npm-version-src]: https://img.shields.io/npm/v/nuxt-seo-utils/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-version-href]: https://npmjs.com/package/nuxt-seo-utils
-
-[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-seo-utils.svg?style=flat&colorA=18181B&colorB=28CF8D
-[npm-downloads-href]: https://npmjs.com/package/nuxt-seo-utils
-
-[license-src]: https://img.shields.io/github/license/harlan-zw/nuxt-seo-utils.svg?style=flat&colorA=18181B&colorB=28CF8D
-[license-href]: https://github.com/harlan-zw/nuxt-seo-utils/blob/main/LICENSE.md
-
-[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+<h1>nuxt-seo-utils</h1>
+
+[![npm version][npm-version-src]][npm-version-href]
+[![npm downloads][npm-downloads-src]][npm-downloads-href]
+[![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
+
+Nuxt SEO Utils is a collection of defaults and utilities to improve your Nuxt site's discoverability and shareability.
+
+While there are several features covering many aspects of SEO, it covers important defaults such as [automatic canonical URLs](https://nuxtseo.com/learn/controlling-crawlers/canonical-urls) and
+[open graph tags](https://nuxtseo.com/learn/mastering-meta/open-graph).
+
+<p align="center">
+<table>
+<tbody>
+<td align="center">
+<sub>Made possible by my <a href="https://github.com/sponsors/harlan-zw">Sponsor Program 💖</a><br> Follow me <a href="https://twitter.com/harlan_zw">@harlan_zw</a> 🐦 • Join <a href="https://discord.gg/275MBUBvgP">Discord</a> for help</sub><br>
+</td>
+</tbody>
+</table>
+</p>
+
+## Features
+
+- ▲ Next.js inspired [Metadata Files](https://nextjs.org/docs/app/api-reference/file-conventions/metadata)
+- ✨ Use SEO meta in your nuxt.config (`app.seoMeta`) and route rules
+- 🤖 Adds meta tags (`og:title`, `og:description`, etc.) from page title and description
+- 🧙 Correct tags that need to be absolute (i.e `og:image`)
+- 🧩 Site config template params `useHead({ title: '%site.title' })`
+- 🍞 Breadcrumb composable
+- 🧙 Best practice defaults and enhanced titles
+
+## Installation
+
+Install `nuxt-seo-utils` dependency to your project:
+
+```bash
+npx nuxi@latest module add nuxt-seo-utils
+```
+
+💡 Need a complete SEO solution for Nuxt? Check out [Nuxt SEO](https://nuxtseo.com).
+
+## Documentation
+
+[📖 Read the full documentation](https://nuxtseo.com/docs/utils) for more information.
+
+## Demos
+
+[Basic](https://stackblitz.com/edit/nuxt-starter-vbay3q?file=app.vue)
+
+## Sponsors
+
+<p align="center">
+  <a href="https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg">
+    <img src='https://raw.githubusercontent.com/harlan-zw/static/main/sponsors.svg'/>
+  </a>
+</p>
+
+## License
+
+Licensed under the [MIT license](https://github.com/harlan-zw/nuxt-seo-utils/blob/main/LICENSE.md).
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/nuxt-seo-utils/latest.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-version-href]: https://npmjs.com/package/nuxt-seo-utils
+
+[npm-downloads-src]: https://img.shields.io/npm/dm/nuxt-seo-utils.svg?style=flat&colorA=18181B&colorB=28CF8D
+[npm-downloads-href]: https://npmjs.com/package/nuxt-seo-utils
+
+[license-src]: https://img.shields.io/github/license/harlan-zw/nuxt-seo-utils.svg?style=flat&colorA=18181B&colorB=28CF8D
+[license-href]: https://github.com/harlan-zw/nuxt-seo-utils/blob/main/LICENSE.md
+
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { UseSeoMetaInput } from '@unhead/vue/types';
+import { MetaFlatSerializable } from '../dist/runtime/types.js';
 
 interface ModuleOptions {
     /**
@@ -101,7 +101,7 @@ interface ModuleOptions {
     /**
      * The SEO meta object to be used as defaults.
      */
-    meta: UseSeoMetaInput;
+    meta: MetaFlatSerializable;
     /**
      * Enables debug logs and a debug endpoint.
      *

package/dist/module.d.ts

@@ -1,5 +1,5 @@
 import * as _nuxt_schema from '@nuxt/schema';
-import { UseSeoMetaInput } from '@unhead/vue/types';
+import { MetaFlatSerializable } from '../dist/runtime/types.js';
 
 interface ModuleOptions {
     /**
@@ -101,7 +101,7 @@ interface ModuleOptions {
     /**
      * The SEO meta object to be used as defaults.
      */
-    meta: UseSeoMetaInput;
+    meta: MetaFlatSerializable;
     /**
      * Enables debug logs and a debug endpoint.
      *

package/dist/module.json

@@ -5,7 +5,7 @@
     "nuxt": ">=3.16.0",
     "bridge": false
   },
-  "version": "7.0.1",
+  "version": "7.0.3",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,10 +1,10 @@
-import { useNuxt, createResolver, addTemplate, defineNuxtModule, useLogger, addServerHandler, hasNuxtModule, addPlugin, addImports, addVitePlugin, resolvePath } from '@nuxt/kit';
+import { useNuxt, createResolver, addTemplate, defineNuxtModule, useLogger, addServerHandler, hasNuxtModule, addPlugin, addImports, addVitePlugin } from '@nuxt/kit';
 import UnheadVite from '@unhead/addons/vite';
 import { defu } from 'defu';
 import { installNuxtSiteConfig } from 'nuxt-site-config/kit';
-import { relative, resolve, extname, dirname, basename } from 'pathe';
 import { unpackMeta } from '@unhead/vue/utils';
 import fg from 'fast-glob';
+import { relative, resolve, extname, dirname, basename } from 'pathe';
 import fs from 'node:fs';
 import { encodePath, joinURL } from 'ufo';
 import escapeRE from 'escape-string-regexp';
@@ -12,8 +12,8 @@ import { readFile } from 'node:fs/promises';
 import imageSize from 'image-size';
 
 function extendNuxtConfigAppHeadSeoMeta(nuxt = useNuxt()) {
-  const seoMeta = nuxt.options.app?.seoMeta || nuxt.options.app?.head?.seoMeta || false;
-  const configSeoMeta = nuxt.options.seo?.meta || nuxt.options.seo?.seoMeta || false;
+  const seoMeta = nuxt.options.app?.seoMeta || nuxt.options.app?.head?.seoMeta || {};
+  const configSeoMeta = nuxt.options.seo?.meta || nuxt.options.seo?.seoMeta || {};
   if (!seoMeta && !configSeoMeta)
     return;
   nuxt.options.app.head = nuxt.options.app.head || {};
@@ -21,7 +21,8 @@ function extendNuxtConfigAppHeadSeoMeta(nuxt = useNuxt()) {
     ...nuxt.options.app.head,
     meta: [
       ...nuxt.options.app.head.meta || [],
-      ...unpackMeta(seoMeta || {}),
+      // @ts-expect-error untyped
+      ...unpackMeta(seoMeta),
       ...unpackMeta(configSeoMeta || {})
     ]
   };
@@ -499,32 +500,25 @@ const module = defineNuxtModule({
       setupNuxtConfigAppHeadWithMoreDefaults(nuxt);
     if (config.extendNuxtConfigAppHeadTypes)
       extendNuxtConfigAppHeadTypes();
-    extendTypes("nuxt-seo-utils", async () => {
-      const pkg = "@unhead/vue/types";
-      let unheadSchemaPath;
-      try {
-        unheadSchemaPath = relative(resolve(nuxt.options.rootDir, nuxt.options.buildDir, "module"), await resolvePath(pkg));
-      } catch {
-        unheadSchemaPath = pkg;
-      }
+    extendTypes("nuxt-seo-utils", async (ctx) => {
       return `
 declare module 'nitropack' {
   interface NitroRouteRules {
-     seoMeta?: import('${unheadSchemaPath}').UseSeoMetaInput
-     head?: import('${unheadSchemaPath}').Head
+     seoMeta?: import('${ctx.typesPath}').MetaFlatSerializable
+     head?: import('${ctx.typesPath}').Head
   }
   interface NitroRouteConfig {
-    seoMeta?: import('${unheadSchemaPath}').UseSeoMetaInput
-    head?: import('${unheadSchemaPath}').Head
+    seoMeta?: import('${ctx.typesPath}').MetaFlatSerializable
+    head?: import('${ctx.typesPath}').Head
   }
 }
 
 declare module '@nuxt/schema' {
-  interface AppHeadMetaObject { seoMeta?: import('${unheadSchemaPath}').UseSeoMetaInput }
+  interface AppHeadMetaObject { seoMeta?: import('${ctx.typesPath}').MetaFlatSerializable }
 }
 
 declare module 'nuxt/schema' {
-  interface AppHeadMetaObject { seoMeta?: import('${unheadSchemaPath}').UseSeoMetaInput }
+  interface AppHeadMetaObject { seoMeta?: import('${ctx.typesPath}').MetaFlatSerializable }
 }
 `;
     });
@@ -536,7 +530,7 @@ declare module 'nuxt/schema' {
     if (config.mergeWithSiteConfig)
       addPlugin({ src: resolve(appRuntimeDir, "plugins", "siteConfig") });
     if (config.extendRouteRules)
-      addPlugin({ src: resolve(appRuntimeDir, "plugins", "0.routeRules.server"), mode: "server" });
+      addPlugin({ src: resolve(appRuntimeDir, "plugins", "0.routeRules") });
     if (config.fixRequiredAbsoluteMetaTagsLinks)
       addPlugin({ src: resolve(appRuntimeDir, "plugins", "1.absoluteImageUrls.server"), mode: "server" });
   }

package/dist/runtime/app/composables/useBreadcrumbItems.d.ts

@@ -6,7 +6,7 @@ interface NuxtUIBreadcrumbItem extends NuxtLinkProps {
     icon?: string;
     iconClass?: string;
     as?: string;
-    type?: string;
+    type?: 'button' | 'submit' | 'reset';
     disabled?: boolean;
     active?: boolean;
     exact?: boolean;

package/dist/runtime/app/composables/useBreadcrumbItems.js

@@ -7,9 +7,9 @@ import { useSiteConfig } from "#site-config/app/composables/useSiteConfig";
 import { createSitePathResolver } from "#site-config/app/composables/utils";
 import { defu } from "defu";
 import { fixSlashes } from "nuxt-site-config/urls";
-import { useRouter } from "nuxt/app";
+import { useNuxtApp, useRoute, useRouter, useState } from "nuxt/app";
 import { withoutTrailingSlash } from "ufo";
-import { computed, getCurrentInstance, inject, onUnmounted, provide, ref, toRaw, toValue } from "vue";
+import { computed, getCurrentInstance, inject, onScopeDispose, onUnmounted, provide, ref, toRaw, toValue } from "vue";
 import { pathBreadcrumbSegments } from "../../shared/breadcrumbs.js";
 function withoutQuery(path) {
   return path.split("?")[0];
@@ -21,6 +21,7 @@ const BreadcrumbCtx = Symbol("BreadcrumbCtx");
 export function useBreadcrumbItems(_options = {}) {
   const vm = getCurrentInstance();
   const id = _options.id || "breadcrumb";
+  const pauseUpdates = ref(import.meta.client);
   let stateRef = null;
   if (vm) {
     stateRef = inject(BreadcrumbCtx, null);
@@ -35,24 +36,50 @@ export function useBreadcrumbItems(_options = {}) {
     const idx = state[id].push(_options) - 1;
     stateRef.value = state;
     onUnmounted(() => {
-      stateRef.value = Object.fromEntries(Object.entries(stateRef.value).map(([k, v]) => {
-        if (k === id) {
-          return v.filter((_, i) => i !== idx);
+      const state2 = toRaw(stateRef.value);
+      if (state2[id]) {
+        state2[id] = state2[id].map((_, i) => i === idx ? false : _);
+        stateRef.value = state2;
+      }
+    });
+    if (import.meta.client) {
+      const nuxtApp = useNuxtApp();
+      const _ = [];
+      _.push(nuxtApp.hooks.hook("page:start", () => {
+        pauseUpdates.value = true;
+      }));
+      _.push(nuxtApp.hooks.hook("page:finish", () => {
+        if (!nuxtApp.isHydrating) {
+          pauseUpdates.value = false;
         }
-        return v;
       }));
-    });
+      _.push(nuxtApp.hooks.hook("app:error", () => {
+        pauseUpdates.value = false;
+      }));
+      _.push(nuxtApp.hooks.hook("app:suspense:resolve", () => {
+        pauseUpdates.value = false;
+      }));
+      onScopeDispose(() => {
+        _.forEach((hook) => hook?.());
+        _.length = 0;
+      });
+    }
   }
+  const route = useRoute();
   const router = useRouter();
   const i18n = useI18n();
   const siteResolver = createSitePathResolver({
     canonical: true,
     absolute: true
   });
+  const lastBreadcrumbs = useState(`nuxt-seo:breadcrumb:${id}`, () => []);
   const siteConfig = useSiteConfig();
   const items = computed(() => {
+    if (import.meta.client && pauseUpdates.value) {
+      return lastBreadcrumbs.value;
+    }
     const optionStack = stateRef?.value?.[id] || [_options];
-    const flatOptions = toRaw([...optionStack]).reduce((acc, cur) => {
+    const flatOptions = toRaw([...optionStack]).filter(Boolean).reduce((acc, cur) => {
       acc.rootSegment = acc.rootSegment || cur.rootSegment;
       acc.path = acc.path || cur.path;
       return acc;
@@ -62,8 +89,8 @@ export function useBreadcrumbItems(_options = {}) {
       if (i18n.strategy === "prefix" || i18n.strategy !== "no_prefix" && toValue(i18n.defaultLocale) !== toValue(i18n.locale))
         rootNode = `${rootNode}${toValue(i18n.locale)}`;
     }
-    const current = withoutQuery(withoutTrailingSlash(toValue(flatOptions.path || router.currentRoute.value?.path) || rootNode));
-    const allOverrides = toRaw([...optionStack])?.map((opts) => toValue(opts.overrides)).filter(Boolean);
+    const current = withoutQuery(withoutTrailingSlash(toValue(flatOptions.path) || toRaw(route).path || rootNode));
+    const allOverrides = toRaw([...optionStack]).filter(Boolean)?.map((opts) => toValue(opts.overrides)).filter(Boolean);
     const flatOverrides = allOverrides?.reduce((acc, i) => {
       if (i) {
         i.forEach((item, index) => {
@@ -85,25 +112,25 @@ export function useBreadcrumbItems(_options = {}) {
       }
       return item;
     });
-    const allPrepends = toRaw([...optionStack]).flatMap((opts) => toValue(opts.prepend)).filter(Boolean);
-    const allAppends = toRaw([...optionStack]).flatMap((opts) => toValue(opts.append)).filter(Boolean);
+    const allPrepends = toRaw([...optionStack]).filter(Boolean).flatMap((opts) => toValue(opts.prepend)).filter(Boolean);
+    const allAppends = toRaw([...optionStack]).filter(Boolean).flatMap((opts) => toValue(opts.append)).filter(Boolean);
     if (allPrepends.length)
       segments.unshift(...allPrepends);
     if (allAppends.length)
       segments.push(...allAppends);
-    return segments.filter(Boolean).map((item) => {
+    lastBreadcrumbs.value = segments.filter(Boolean).map((item) => {
       let fallbackLabel = titleCase(String((item.to || "").split("/").pop()));
       let fallbackAriaLabel = "";
-      const route = item.to ? router.resolve(item.to)?.matched?.[0] : null;
-      if (route) {
-        const routeMeta = route?.meta || {};
+      const route2 = item.to ? router.resolve(item.to)?.matched?.[0] : null;
+      if (route2) {
+        const routeMeta = route2?.meta || {};
         if (routeMeta.breadcrumb) {
           item = {
             ...item,
             ...routeMeta.breadcrumb
           };
         }
-        const routeName = String(route.name).split("___")[0];
+        const routeName = String(route2.name).split("___")[0];
         if (routeName === "index") {
           fallbackLabel = "Home";
         }
@@ -125,10 +152,12 @@ export function useBreadcrumbItems(_options = {}) {
       }
       return m;
     }).filter(Boolean);
+    return lastBreadcrumbs.value;
   });
   const schemaOrgEnabled = typeof _options.schemaOrg === "undefined" ? true : _options.schemaOrg;
   if ((import.meta.dev || import.meta.server || import.meta.env?.NODE_ENV === "test") && schemaOrgEnabled) {
     useSchemaOrg([
+      // @ts-expect-error untyped
       defineBreadcrumb({
         id: `#${id}`,
         itemListElement: computed(() => items.value.map((item) => ({

package/dist/runtime/app/logic/applyDefaults.js

@@ -1,10 +1,13 @@
-import { useHead, useSeoMeta } from "#imports";
+import { injectHead, useHead, useSeoMeta } from "#imports";
 import { useSiteConfig } from "#site-config/app/composables/useSiteConfig";
 import { createSitePathResolver } from "#site-config/app/composables/utils";
+import { TemplateParamsPlugin } from "@unhead/vue/plugins";
 import { useError, useRoute, useRuntimeConfig } from "nuxt/app";
 import { stringifyQuery } from "ufo";
-import { computed, ref, watch } from "vue";
+import { computed } from "vue";
 export function applyDefaults(i18n) {
+  const head = injectHead();
+  head.use(TemplateParamsPlugin);
   const { canonicalQueryWhitelist, canonicalLowercase } = useRuntimeConfig().public["seo-utils"];
   const siteConfig = useSiteConfig();
   const route = useRoute();
@@ -12,42 +15,52 @@ export function applyDefaults(i18n) {
   const err = useError();
   const canonicalUrl = computed(() => {
     if (err.value) {
-      return null;
+      return false;
     }
     const { query } = route;
     let url = resolveUrl(route.path || "/").value || route.path;
     if (canonicalLowercase) {
-      url = url.toLocaleLowerCase(siteConfig.currentLocale);
+      try {
+        url = url.toLocaleLowerCase(siteConfig.currentLocale || "en");
+      } catch {
+        url = url.toLowerCase();
+      }
     }
     const filteredQuery = Object.fromEntries(
       Object.entries(query).filter(([key]) => canonicalQueryWhitelist.includes(key)).sort(([a], [b]) => a.localeCompare(b))
       // Sort params
     );
-    return Object.keys(filteredQuery).length ? `${url}?${stringifyQuery(filteredQuery)}` : url;
+    const href = Object.keys(filteredQuery).length ? `${url}?${stringifyQuery(filteredQuery)}` : url;
+    return { rel: "canonical", href };
   });
-  const templateParams = ref({ site: siteConfig, siteName: siteConfig.name });
-  if (import.meta.client) {
-    watch(siteConfig, (v) => {
-      templateParams.value = { site: v, siteName: v.name || "" };
-    }, {
-      deep: true
-    });
-  }
-  useHead({ templateParams });
   const minimalPriority = {
     // give nuxt.config values higher priority
-    tagPriority: 101
+    tagPriority: "low"
   };
   useHead({
     htmlAttrs: { lang: i18n.locale },
-    templateParams,
+    templateParams: {
+      site: () => siteConfig,
+      siteName: () => siteConfig.name
+    },
     titleTemplate: "%s %separator %siteName",
-    link: [{ rel: "canonical", href: () => canonicalUrl.value }]
+    link: [() => canonicalUrl.value]
   }, minimalPriority);
   const seoMeta = {
     ogType: "website",
-    ogUrl: () => canonicalUrl.value,
-    ogLocale: () => i18n.locale.value,
+    ogUrl: () => {
+      const url = canonicalUrl.value;
+      return url ? url.href : false;
+    },
+    ogLocale: () => {
+      if (i18n.locale.value) {
+        const locale = i18n.locale.value.replace("-", "_");
+        if (locale.includes("_")) {
+          return locale;
+        }
+      }
+      return false;
+    },
     ogSiteName: siteConfig.name
   };
   if (siteConfig.description)

package/dist/runtime/app/plugins/0.routeRules.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
+export default _default;

package/dist/runtime/app/plugins/0.routeRules.js

@@ -0,0 +1,24 @@
+import { injectHead, useSeoMeta } from "#imports";
+import { defineNuxtPlugin, getRouteRules, useRequestEvent, useState } from "nuxt/app";
+export default defineNuxtPlugin({
+  enforce: "post",
+  async setup() {
+    const head = injectHead();
+    const routeRuleState = useState("nuxt-seo-utils:routeRules", () => null);
+    if (import.meta.server) {
+      const event = useRequestEvent();
+      const routeRules = await getRouteRules(event);
+      routeRuleState.value = {
+        head: routeRules.head,
+        seoMeta: routeRules.seoMeta
+      };
+    }
+    if (routeRuleState.value) {
+      const { head: headInput, seoMeta } = routeRuleState.value;
+      if (headInput)
+        head.push(headInput);
+      if (seoMeta)
+        useSeoMeta(seoMeta);
+    }
+  }
+});

package/dist/runtime/app/plugins/1.absoluteImageUrls.server.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/app/plugins/defaults.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/app/plugins/defaultsWaitI18n.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/app/plugins/defaultsWaitI18n.js

@@ -8,7 +8,6 @@ export default defineNuxtPlugin({
     islands: false
   },
   // we need to wait for the i18n plugin to run first
-  // @ts-expect-error dynamic
   dependsOn: ["nuxt-site-config:i18n"],
   setup(nuxtApp) {
     const siteConfig = useSiteConfig();

package/dist/runtime/app/plugins/inferSeoMetaPlugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/app/plugins/siteConfig.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/app/plugins/titles.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: import("#app").Plugin<Record<string, unknown>> & import("#app").ObjectPlugin<Record<string, unknown>>;
 export default _default;

package/dist/runtime/app/plugins/titles.js

@@ -12,7 +12,7 @@ export default defineNuxtPlugin({
     const route = useRoute();
     const err = useError();
     const title = computed(() => {
-      if ([404, 500].includes(err.value?.statusCode)) {
+      if (err.value && [404, 500].includes(err.value?.statusCode)) {
         return `${err.value.statusCode} - ${err.value.message}`;
       }
       if (typeof route.meta?.title === "string")

package/dist/runtime/server/tsconfig.json

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

package/dist/runtime/types.d.ts

@@ -1 +1,6 @@
-export type { Head, UseSeoMetaInput } from '@unhead/vue';
+import type { Head, MetaFlat, RawInput } from '@unhead/vue/types';
+export type MetaFlatSerializable = MetaFlat & {
+    title?: RawInput<'title'>;
+    titleTemplate?: RawInput<'titleTemplate'>;
+};
+export type { Head };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "nuxt-seo-utils",
   "type": "module",
-  "version": "7.0.2",
+  "version": "7.0.4",
   "description": "SEO utilities to improve your Nuxt sites discoverability and shareability",
   "license": "MIT",
   "funding": "https://github.com/sponsors/harlan-zw",
@@ -27,23 +27,20 @@
   ],
   "build": {
     "externals": [
-      "@unhead/shared",
-      "@unhead/schema",
       "unhead",
+      "@unhead/vue",
+      "@unhead/vue/plugins",
       "@unhead/vue/utils"
     ]
   },
-  "peerDependencies": {
-    "@unhead/vue": "^2.0.0-rc.9"
-  },
   "dependencies": {
     "@nuxt/kit": "^3.16.0",
-    "@unhead/addons": "2.0.0-rc.9",
+    "@unhead/addons": "^2.0.0-rc.12",
     "defu": "^6.1.4",
     "escape-string-regexp": "^5.0.0",
     "fast-glob": "^3.3.3",
     "image-size": "^2.0.0",
-    "nuxt-site-config": "^3.1.4",
+    "nuxt-site-config": "^3.1.5",
     "pathe": "^2.0.3",
     "pkg-types": "^2.1.0",
     "scule": "^1.3.0",
@@ -51,28 +48,31 @@
     "ufo": "^1.5.4"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "4.8.1",
+    "@antfu/eslint-config": "4.10.1",
     "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "3.16.0",
     "@nuxt/test-utils": "^3.17.2",
-    "@nuxt/ui": "^2.21.1",
+    "@nuxt/ui": "^3.0.0",
     "@nuxtjs/eslint-config-typescript": "^12.1.0",
     "@nuxtjs/i18n": "^9.3.1",
-    "@unhead/vue": "2.0.0-rc.9",
+    "@unhead/vue": "2.0.0-rc.12",
     "@vue/test-utils": "^2.4.6",
-    "bumpp": "^10.0.3",
+    "bumpp": "^10.1.0",
     "case-police": "^1.0.0",
     "cheerio": "1.0.0",
     "eslint": "^9.22.0",
-    "happy-dom": "^17.4.3",
+    "happy-dom": "^17.4.4",
     "markdownlint-cli": "^0.44.0",
     "nuxt": "^3.16.0",
     "nuxt-content-twoslash": "^0.1.2",
     "playwright-core": "^1.51.0",
     "sass": "^1.85.1",
     "typescript": "5.8.2",
-    "vitest": "^3.0.8"
+    "vitest": "^3.0.8",
+    "vue-tsc": "^2.2.8"
   },
   "resolutions": {
+    "nuxt": "3.16.0",
     "typescript": "5.6.3"
   },
   "scripts": {
@@ -81,7 +81,8 @@
     "build": "pnpm stub && nuxt-module-build build",
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "typecheck": "vue-tsc --noEmit",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground && nuxi prepare test/fixtures/basic && nuxi prepare test/fixtures/i18n",
     "release": "pnpm build && bumpp -x \"npx changelogen --output=CHANGELOG.log\" && pnpm publish",
     "lint:docs": "markdownlint ./docs/content && case-police 'docs/content/**/*.md' *.md",
     "lint:docs:fix": "markdownlint ./docs/content --fix && case-police 'docs/content/**/*.md' *.md --fix",

package/dist/runtime/app/plugins/0.routeRules.server.d.ts

@@ -1,2 +0,0 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
-export default _default;

package/dist/runtime/app/plugins/0.routeRules.server.js

@@ -1,20 +0,0 @@
-import { injectHead } from "#imports";
-import { unpackMeta } from "@unhead/vue/utils";
-import { defineNuxtPlugin, useRequestEvent } from "nuxt/app";
-export default defineNuxtPlugin({
-  enforce: "post",
-  async setup() {
-    const head = injectHead();
-    if (!head)
-      return;
-    const event = useRequestEvent();
-    if (event.context._nitro.routeRules.head)
-      head.push(event.context._nitro.routeRules.head, { mode: "server", tagPriority: -9 });
-    if (event.context._nitro.routeRules.seoMeta) {
-      const meta = unpackMeta({ ...event.context._nitro.routeRules.seoMeta });
-      head.push({
-        meta
-      }, { mode: "server", tagPriority: -9 });
-    }
-  }
-});