xiaomai
cf1eb6965e
Replace global I18n singleton with a factory function Inject request-specific I18n instances into Nuxt app and SEO metadata Prevent cross-request locale state pollution during server-side rendering
63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
import { computed, ref } from 'vue';
|
|
import { onLocaleChange } from '../src/i18n';
|
|
import { applyRouteSeo, onSeoChange, resolveRouteSeo, setSeoTranslator, type ResolvedSeoConfig } from '../src/seo';
|
|
|
|
export default defineNuxtPlugin(() => {
|
|
const router = useRouter();
|
|
const nuxtApp = useNuxtApp();
|
|
const t = (nuxtApp.$pokopiaI18n as { global: { t: (key: string, values?: Record<string, string | number>) => string } }).global.t;
|
|
const dynamicSeo = ref<ResolvedSeoConfig | null>(null);
|
|
const activeSeo = computed(() => dynamicSeo.value ?? resolveRouteSeo(router.currentRoute.value, t));
|
|
|
|
useHead(() => ({
|
|
title: activeSeo.value.title,
|
|
htmlAttrs: {
|
|
lang: activeSeo.value.locale
|
|
},
|
|
meta: [
|
|
{ key: 'description', name: 'description', content: activeSeo.value.description },
|
|
{ key: 'robots', name: 'robots', content: activeSeo.value.robots },
|
|
{ key: 'twitter-card', name: 'twitter:card', content: 'summary_large_image' },
|
|
{ key: 'twitter-title', name: 'twitter:title', content: activeSeo.value.title },
|
|
{ key: 'twitter-description', name: 'twitter:description', content: activeSeo.value.description },
|
|
{ key: 'twitter-image', name: 'twitter:image', content: activeSeo.value.imageUrl },
|
|
{ key: 'og-site-name', property: 'og:site_name', content: 'Pokopia Wiki' },
|
|
{ key: 'og-type', property: 'og:type', content: 'website' },
|
|
{ key: 'og-title', property: 'og:title', content: activeSeo.value.title },
|
|
{ key: 'og-description', property: 'og:description', content: activeSeo.value.description },
|
|
{ key: 'og-url', property: 'og:url', content: activeSeo.value.canonicalUrl },
|
|
{ key: 'og-image', property: 'og:image', content: activeSeo.value.imageUrl },
|
|
{ key: 'og-locale', property: 'og:locale', content: activeSeo.value.locale === 'en' ? 'en_US' : activeSeo.value.locale.replace('-', '_') }
|
|
],
|
|
link: [{ key: 'canonical', rel: 'canonical', href: activeSeo.value.canonicalUrl }],
|
|
script: [
|
|
{
|
|
key: 'pokopia-structured-data',
|
|
id: 'pokopia-structured-data',
|
|
type: 'application/ld+json',
|
|
children: JSON.stringify(activeSeo.value.structuredData)
|
|
}
|
|
]
|
|
}));
|
|
|
|
if (import.meta.server) {
|
|
return;
|
|
}
|
|
|
|
setSeoTranslator(t);
|
|
onSeoChange((seo) => {
|
|
dynamicSeo.value = seo;
|
|
});
|
|
onLocaleChange(() => {
|
|
dynamicSeo.value = null;
|
|
applyRouteSeo(router.currentRoute.value);
|
|
});
|
|
|
|
router.afterEach((to) => {
|
|
dynamicSeo.value = null;
|
|
applyRouteSeo(to);
|
|
});
|
|
|
|
applyRouteSeo(router.currentRoute.value);
|
|
});
|