実装手順
sitemapモジュールのインストール
$ yarn add @nuxtjs/sitemap
or
$ npm i --save @nuxtjs/sitemap
nuxt.config.jsに登録
modules: [
'@nuxtjs/sitemap'
]
詳細設定(nuxt.config.js)
sitemapプロパティを下記のようにnuxt.config.js内にセットしたら完了! 動的なルートも生成したい場合は、routesメソッドに対し、生成したいurlリストを配列の形で返すと生成されました。
注意点としては、非同期でAPI叩いて取得する場合がほとんどだと思うので、Promiseオブジェクトを返すか、async awaitで対応すれば良いと思う。
↓async await版(Contentfulに投稿した記事一覧urlを取得する例)
sitemap: {
path: '/sitemap.xml', // 出力パス
hostname: 'https://www.webfacts.jp',
cacheTime: 1000 * 60 * 15,
generate: false, // nuxt generate で静的ファイル出力する場合にはtrueにする
exclude: [ // 除外項目
'/auth/**',
'/my-page'
],
async routes () { // ここで動的ページの出力をする
const contentful = require('contentful');
const client = contentful.createClient({
space: config.CTF_SPACE_ID,
accessToken: config.CTF_CDA_ACCESS_TOKEN
});
const posts = await client.getEntries({
'content_type': config.CTF_BLOG_POST_TYPE_ID,
order: '-sys.createdAt'
});
let urls = [];
posts.items.forEach((val, idx, arr) => {
urls[idx] = val.fields.slug
});
return urls;
}
}
おわり〜。