about uscontact

How to generate Sitemap in NuxtJS project

Category:
Author: zemna
Date: April 18, 2021
Share this:

Install @nuxtjs/sitemap package

npm install @nuxtjs/sitemap --save

Create route generation utility file

Create createRoute.js file in /utils folder. /utils folder is not default folder by NuxtJS. So you can create it by manual.

Than add source code like bellow. This source code is from NuxtJS Content Official Documentation.

export default async () => {
  const { $content } = require('@nuxt/content')
  const files = await $content({ deep: true }).only(['path']).fetch()
  return files.map((file) => (file.path === '/index' ? '/' : file.path))
}

Import createRoute.js and configure sitemap in nuxt.config.js

Import createRoute.js file at the top of the nuxt.config.js file

import createRoutes from "./utils/createRoutes"
export default {
  // ...
}

Add @nuxtjs/sitemap to modules

export default {
  // ...
  modules: [
    '@nuxt/content',
    '@nuxtjs/sitemap',
  ],
  // ...
}

Configure sitemap

export default {
  // ...
  sitemap: {
    hostname: process.env.BASE_URL,
    gzip: true,
    routes() {
      return createRoutes();
    }
  }
  // ...
}
Share this:

Leave a Reply

Your email address will not be published. Required fields are marked *

ZEMNA.NET

Professional software development agency estalished in Indonesia. We offers website setup, web application development, fulfillment service, and etc.
Follow us
Follow us to get latest news and tutorials.
2022 - Copyright, All Rights Reserved, Made by ZEMNA.NET with ❤️
magnifiercrossmenu