Hello!
I recently implemented Sitemap in Nuxt, including i18n (internationalization) and dynamic links. I didn't find any tutorial online about implementing a sitemap combining these options, so I hope this guide will help some other devs.
Internationalization plugin
@nuxtjs/i18n provides functionality that enables having i18n in your app. I will assume that you already have some setup for it. That's how it looks for me:
export default defineNuxtConfig({
modules: [
['@nuxtjs/i18n',{
locales: [
{ code: 'en', iso: 'en-US' },
{ code: 'sv', iso: 'sv-SE' },
],
defaultLocale: 'en',
strategy: 'prefix_except_default',
vueI18n: './i18n.config.ts',
detectBrowserLanguage: false,
}
],
]
})
locales specifies which locales you want to have in your sitemap.
strategy meaning is explained in the documentation.
detectBrowserLanguage is annoying, I recommend setting it to false.
vueI18n is my file with my messages, it looks approximately like this
export default defineI18nConfig(() => ({
legacy: false,
locale: 'en',
messages: {
en: {
navbarHome: 'Home',
...,
},
sv: {
navbarHome: 'Hem',
...,
},
}
}))
Sitemap and defining dynamic routes
I chose to use @nuxtjs/sitemap
Part of my setup in nuxt.config.ts that focuses on sitemap module looks like this:
export default defineNuxtConfig({
modules: [
['@nuxtjs/sitemap',
{
sources: ['/api/sitemap'],
xslColumns: [
{ label: 'URL', width: '50%' },
{ label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
{ label: 'Hreflangs', select: 'count(xhtml:link)', width: '25%' },
],
}],
],
})
xslColumns is defining how the sitemap is presented, check the documentation to learn more.
The sources are actually where we specify the dynamic links that we want to add to our sitemap. More info in the documentation.
In the contents constant, I receive a list of all the articles that I have in my backend. Then I proceed to extract slugs for all of them and prepare them
My file looks approximately like this, it's not perfectly optimized but should give you an idea:
export default defineSitemapEventHandler(async () => {
async function fetchContents() {
try {
const contents = await $fetch<ApiResponseContent>('link_to_api_endpoint');
const sitemapEntries = contents.data.map(content => {
const mainSlug = content.attributes.slug
const localizationEntries = content.attributes.localizations?.data.map(localization => {
return {
link: [
{
hreflang: localization.attributes.locale,
href: localization.attributes.slug
},
{
hreflang: 'x-default',
href: content.attributes.locale == 'en' ? mainSlug : localization.attributes.slug}
}
]
};
}) || [];
return [
{
loc: mainSlug,
_sitemap: content.attributes.locale == 'en' ? "en-US" : "sv-SE",
link: [
{
hreflang: content.attributes.locale,
href: mainSlug
},
...localizationEntries.map(entry => entry.link).flat()
]
},
];
});
return sitemapEntries;
} catch (error) {
console.error("Error fetching pages:", error);
return [];
}
}
const slugsContents = await fetchContents()
const allSlugs = [...slugsContents]
const flattenedSlugs = allSlugs.flat();
return [
...flattenedSlugs.map(content => asSitemapUrl({
loc: content.loc,
alternatives: content.link,
_sitemap: content._sitemap
}))
]
This way we end up with a list of slugs in an asSitemapUrl format. We specify the link (loc) of every item and its alternatives. Each item WITHOUT translation should have 1 alternative (the link to the item itself), and each item WITH translation should have 3 alternatives (the item's link, its other language version link, and its default language).
Some slugs should end up in an English sitemap, some in the Swedish one. You specify in which sitemap they should be by specifying the _sitemap parameter. Make sure you use the correct name that i18n is using for your locales.
Result
If you follow my description, you should be able to see the resulting sitemaps at yourwebsitelink.com/sitemap.xml after starting your application. You can then proceed to change the look of each of the sitemaps by editing the xslColumns parameter.
Hope this guide gave you some sense of direction on how to implement i18n and dynamic links in the sitemap in Nuxt. If you have any questions feel free to reach out to me, I'll be happy to help!
Cheers!
Bart
