Sitemap Module

Automatically generate or serve dynamic sitemap.xml for Nuxt projects!

📖 Release Notes

Warning

this package is highly experimental, and may cause unknown issues, feel free to report them.

Currently broken

• When using a function for dynamic Routes, you are not able to use imports!!
  • see below for a usable workaround:

nuxt.config.ts

import dynamicRoutes from './helpers/dynamicRoutes'
...
 modules: [
    '@funken-studio/sitemap-nuxt-3',
],
sitemap: {
    hostname: 'https://example.com', 
    cacheTime: 1,
    routes: dynamicRoutes,
    defaults: {
      changefreq: 'daily',
      priority: 1,
      lastmod: new Date().toISOString(),
    },
},
...

/helpers/dynamicRoutes

/**
 * since we can't use imports here we just fetch
 * all our routes from a custom API endpoint where we can use imports
 */
export default async () => {
  return await $fetch('/api/sitemap_routes', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
  })
}

/server/api/sitemap_routes.ts

import { IncomingMessage, ServerResponse } from 'http'
import { apiPlugin } from '@storyblok/vue'
/**
 * We are using Storyblok as our CMS,
 * in order to have all news and testimonials pages in our sitemap
 * we need to fetch some from Storyblok
 */
export default async (req: IncomingMessage, res: ServerResponse) => {
  if (req.method !== 'POST') {
    res.statusCode = 405
    res.end()
    return
  }
  const config = useRuntimeConfig()
  const { storyblokApi } = apiPlugin({ apiOptions: config.public.storyblok })
  console.log('[vue-sitemap] generate dynamic routes')

  const fetchRoutes = async (slug) => {
    const routes = []
    const pageInfo = await storyblokApi.get(`cdn/stories/?starts_with=${slug}`, {
      version: 'published',
      per_page: 1,
      page: 1,
    })

    const totalPages = Math.ceil(pageInfo.headers.total / 25)
    for (let page = 1; page <= totalPages; page++) {
      const pageNews = await storyblokApi.get(`cdn/stories/?starts_with=${slug}`, {
        version: 'published',
        page: page,
      })

      for (const news of pageNews.data.stories) {
        routes.push(`/${slug}/${news.slug}`)
      }

      routes.push(`/${slug}/${page}`)
    }
    return routes
  }

  return [...(await fetchRoutes('news')), ...(await fetchRoutes('testimonials'))]
}

License

MIT License

Contributors

• Nicolas Pennec
• Pooya Parsa