I18n

Introduction

Out of the box, the module integrates with @nuxtjs/i18n and nuxt-i18n-micro without any extra configuration.

However, I18n is tricky, you may need to tinker with a few options to get the best results.

I18n Modes

Automatic I18n Multi Sitemap

When certain conditions are met then the sitemap module will automatically generate a sitemap for each locale:

• If you're not using no_prefix strategy
• Or if you're using Different Domains,
• And you haven't configured the sitemaps option

This looks like:

> ./sitemap_index.xml
> ./en-sitemap.xml
> ./fr-sitemap.xml
# ...etc

These sitemaps will include app sources. The nuxt:pages source will automatically determine the correct alternatives for your pages.

If you need to opt-out of app sources, use excludeAppSources: true.

I18n Pages

If you have enabled i18n.pages in your i18n configuration, then the sitemap module will automatically generate a single sitemap using the configuration.

This sitemap will not include app sources.

You can add additional URLs using sources.

Dynamic URLs with i18n

To simplify the sitemap output, any dynamic URLs you provided will not have i18n data and will exist only within the default locale sitemap.

To help you with this, the module provides two options: _i18nTransform and _sitemap.

_i18nTransform

If you want the module to convert a single URL into all of its i18n variants, you can provide the _i18nTransform: true option.

export default defineSitemapEventHandler(() => {
  return [
    {
      loc: '/about-us',
      // will be transformed into /en/about-us and /fr/about-us
      _i18nTransform: true,
    }
  ]
})

_sitemap

Alternatively, you can specify which locale sitemap you want to include the URL in using _sitemap.

export default defineSitemapEventHandler(() => {
  return [
    {
      loc: '/about-us',
      _sitemap: 'en',
    }
  ]
})

Debugging Hreflang

By default, the XML stylesheet doesn't show you the hreflang tags. You will need to view the page source to see them.

Don't worry, these are still visible to search engines.

If you'd like to visually see the hreflang tag counts, you can Customise the UI.

export default defineNuxtConfig({
  sitemap: {
    xslColumns: [
      { label: 'URL', width: '50%' },
      { label: 'Last Modified', select: 'sitemap:lastmod', width: '25%' },
      { label: 'Hreflangs', select: 'count(xhtml)', width: '25%' },
    ],
  }
})