Sitemap

The XerSitemap component provides a way to display a sitemap of all the routes in the application. It is encouraged to display the sitemap in a separate page and link to it from the footer of the application shell.

Showcase

Default

With Ignored Groups

Props

Localized

Name	Type	Default	Required	Description
routes	I18nRouteRecordRaw[]	[]	true	The routes to display in the sitemap.
currentLanguageCode	string	undefined	false	The current active locale, used to display the correct translation for the route name and path. Falls back to vue-i18n locale.
ignoredGroups	string[]	[]	false	sitemap route groups to be ignored for rendering in the sitemap.

Unlocalized

Name	Type	Default	Required	Description
routes	RouteRecordRaw[]	[]	true	The routes to display in the sitemap.
ignoredGroups	string[]	[]	false	sitemap route groups to be ignored for rendering in the sitemap.

Route Record Groups

To allow grouping of routes in the sitemap, the meta property of the route record can be used to specify a group together with a name for different locales.

Localized

import type { i18nRouteRecordRaw } from "@xerius/codey-core";

const routes = [
  {
    path: "default-badge",
    name: "DefaultBadge",
    meta: {
      i18n: {
        "nl-be": "default-badge-nl",
        "fr-be": "default-badge-fr",
      },
      group: {
        "nl-be": "Groep-1",
        "fr-be": "Groupe-1",
      },
    },
    component: DefaultBadgePage,
  },
] satisfies i18nRouteRecordRaw[];

Unlocalized

import type { RouteRecordRaw } from "vue-router";

const routes = [
  {
    path: "default-badge",
    name: "DefaultBadge",
    meta: {
      group: "Groep-1",
    },
    component: DefaultBadgePage,
  },
] satisfies RouteRecordRaw[];

router/router.d.ts

Extend RouteMeta typing

In order to have intellisense on the meta.group property and have the correct typing you need to extend the RouteMeta interface.

import "vue-router"; // Without this you lose all vue-router typings

declare module "vue-router" {
  interface RouteMeta {
    group?: Record<string, string>;
  }
}