Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/benoitdemaegdt/nuxt3-sitemap
sitemap generation for nuxt3
https://github.com/benoitdemaegdt/nuxt3-sitemap
nuxt nuxt-module nuxt3 seo seotools sitemap sitemap-builder sitemap-generator sitemap-xml
Last synced: about 2 months ago
JSON representation
sitemap generation for nuxt3
- Host: GitHub
- URL: https://github.com/benoitdemaegdt/nuxt3-sitemap
- Owner: benoitdemaegdt
- Created: 2022-03-19T18:54:23.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2022-11-06T12:48:06.000Z (about 2 years ago)
- Last Synced: 2023-03-03T00:06:48.129Z (almost 2 years ago)
- Topics: nuxt, nuxt-module, nuxt3, seo, seotools, sitemap, sitemap-builder, sitemap-generator, sitemap-xml
- Language: TypeScript
- Homepage:
- Size: 192 KB
- Stars: 40
- Watchers: 1
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Sitemap generation for Nuxt3
So far the official [nuxt/sitemap](https://sitemap.nuxtjs.org/) module [does not support Nuxt3](https://github.com/nuxt-community/sitemap-module/discussions/234).
Here is a simple way to add a sitemap to your Nuxt3 app.
## Example
An example of a sitemap rendered with this code can be found [here](https://monpetitsommet.fr/sitemap.xml).
## Setup for a very simple static site (no dynamic page)
See instructions
1. install [sitemap.ts](sitemap.ts) as a dev dependency
```bash
npm install --save-dev sitemap
```
2. create a new file in the modules folder
```bash
mkdir modules && touch modules/sitemap.ts
```
3. copy/paste the content of [sitemap.ts](sitemap.ts)
4. add following lines in you nuxt.config.ts file
```ts
export default defineNuxtConfig({
// some configs
modules: ['~/modules/sitemap'],
sitemap: {
hostname: 'https://',
},
// more configs
})
```
Don't forget to change with your actual domain.
5. build your nuxt app and see your sitemap file
```bash
npm run build
```
```bash
npx nuxi preview
```
In your browser go to `http://localhost:3000/sitemap.xml`
### Example
If your pages folder looks like this :
```
pages/
├─ index.vue
├─ blog/
│ ├─ index.vue
│ ├─ first-article.vue
│ ├─ second-article.vue
│ ├─ third-article.vue
```
The generated sitemap will look like this :
## Setup for a dynamic site powered by [@nuxt/content](https://content.nuxtjs.org/) with [prerendering](https://v3.nuxtjs.org/guide/deploy/static-hosting#prerendering)
See instructions (new recommanded way)
1. Follow [official instructions](https://content.nuxtjs.org/guide/recipes/sitemap) from @nuxt/content.
2. These instructions are not perfect because static urls are not generated in the newly created sitemap.xml. To fix this, replace the sitemap.xml.ts file by the [sitemap.xml.ts](sitemap.xml.ts) from this repository.
Your sitemap.xml should now be available and accurate 🎉
See instructions (outdated)
1. install [sitemap.ts](sitemap.ts) as a dev dependency
```bash
npm install --save-dev sitemap
```
2. create a new file in the modules folder
```bash
mkdir modules && touch modules/sitemap.ts
```
3. copy/paste the content of [sitemap-dynamic.ts](sitemap-dynamic.ts) inside your newly created `modules/sitemap.ts` file.
4. add following lines in you nuxt.config.ts file
```ts
export default defineNuxtConfig({
// some configs
modules: ['~/modules/sitemap'],
sitemap: {
hostname: 'https://',
},
// more configs
})
```
Don't forget to change with your actual domain.
5. build your nuxt app and see your sitemap file
```bash
npm run generate
```
Your sitemap is now available in `.output/public/sitemap.xml`
## Credits
Big thanks to
- [Florian Lefebvre](https://github.com/florian-lefebvre) who wrote the original code of this module. See [original Github Discussion](https://github.com/nuxt/framework/discussions/3582) and [original file](https://github.com/florian-lefebvre/portfolio/blob/c513428dea912a19ffb684b8b571b08b8882158c/modules/sitemap.ts).
- [Diizzayy](https://github.com/Diizzayy) who fixed this module. See [this Github Discussion](https://github.com/nuxt/framework/discussions/4568).
- [codeflorist](https://github.com/codeflorist) who found a way to generate sitemaps for prerendered sites.