Automatically generate or serve dynamic sitemap.xml for Nuxt projects!
Normally the sitemap.xml is served via a server middleware / handler, it is only generated in .output/public when running nuxi generate.
If you want to generate the sitemap.xml on every build, you can set the generateOnBuild option to true in the module configuration.
(That option might not work if you are using dynamic routes)
// nuxt.config.js
modules: {
...
['@funken-studio/sitemap-nuxt-3', { generateOnBuild: true }],
...
}- 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 { apiPlugin } from '@storyblok/vue'
import { eventHandler } from 'h3'
/**
* 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 eventHandler(async (event) => {
const { req, res } = event
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'))]
})