[{"data":1,"prerenderedAt":517},["ShallowReactive",2],{"sidebar-posts":3,"post-count":78,"post-\u002Fnetlify-build-plugin-for-nuxt-dynamic-routes":79,"page-\u002Fnetlify-build-plugin-for-nuxt-dynamic-routes":508,"neighbours-\u002Fnetlify-build-plugin-for-nuxt-dynamic-routes":510,"post-projects-\u002Fnetlify-build-plugin-for-nuxt-dynamic-routes":515},[4,8,12,16,19,23,27,31,35,39,43,47,50,54,58,62,66,70,74],{"path":5,"title":6,"date":7},"\u002Fbuilding-take-contentin-mobile-app","I built a ContentIn mobile app in one night and tested it from the sauna","2026-10-29",{"path":9,"title":10,"date":11},"\u002Fmac-mini-claude-code-dev-server","My Mac Mini is my dev server, and one Claude Code session runs each project","2026-10-27",{"path":13,"title":14,"date":15},"\u002Fmax-out-claude-code-every-week","Max out Claude Code every week until I make 10K a month","2026-10-26",{"path":17,"title":18,"date":15},"\u002Fmaxing-out-claude-code-week-1","Maxing out Claude Code, week 1: a new blog, an app stuck in review and a full Mac Mini",{"path":20,"title":21,"date":22},"\u002Ffully-ai-coded-blog-claude-code","This blog is now fully AI coded and run by an agent I just talk to","2026-10-24",{"path":24,"title":25,"date":26},"\u002Fwhy-i-built-pepelly","Why I built Pepelly, a YouTube app for my daughter without the brain rot","2026-10-22",{"path":28,"title":29,"date":30},"\u002Fhow-i-built-an-equity-tracking-app-for-bootstrap-founders-in-a-weekend","How I Built an Equity Tracking App for Bootstrap Founders in a Weekend","2024-11-25",{"path":32,"title":33,"date":34},"\u002Fbuilding-directory-website-with-ai-in-a-day","How I Built a Directory Website in a Day with AI—and Why It's a Game-Changer for SaaS Traffic","2024-11-10",{"path":36,"title":37,"date":38},"\u002Fnetlify-build-plugin-for-nuxt-dynamic-routes","Use a netlify build plugin to generate your nuxt routes","2020-08-08",{"path":40,"title":41,"date":42},"\u002Foptimized-responsive-lazyloading-images-with-nuxt","How to use optimized, responsive and lazyloading images in a nuxt project","2019-11-16",{"path":44,"title":45,"date":46},"\u002Fnuxt-jam-stack","Building a SEO optimized blog with a Nuxt JAM stack and Markdown files","2019-11-07",{"path":48,"title":49,"date":46},"\u002Fprismjs-nuxtjs-static-pages","Getting Prismjs working with Nuxt",{"path":51,"title":52,"date":53},"\u002Fkeylogs-live-on-producthunt","My second launch this year: Keylogs is LIVE on Product Hunt today!","2018-02-12",{"path":55,"title":56,"date":57},"\u002Fa-new-year-and-a-new-startup","A new year and a new startup","2018-01-19",{"path":59,"title":60,"date":61},"\u002Fabout-mydash-whats-the-stack-and-why-did-i-choose-it","About myDash - What’s the stack and why did I choose it?","2017-10-16",{"path":63,"title":64,"date":65},"\u002Fsuper-fast-wordpress-hosting-germany","WordPress hosting test: super fast on raidboxes.eu","2016-12-09",{"path":67,"title":68,"date":69},"\u002Fbest-resources-for-stock-images","Best resources for stock images","2016-12-05",{"path":71,"title":72,"date":73},"\u002Fset-up-automatic-backups-for-parse-server-on-digital-ocean","Set up automatic backups for parse-server on digital ocean","2016-05-25",{"path":75,"title":76,"date":77},"\u002Fhow-to-run-parse-dashboard-alongside-parse-server-on-digital-ocean","How to setup parse-dashboard alongside parse-server on Digital Ocean","2016-05-18",19,{"id":80,"title":37,"body":81,"date":38,"description":497,"draft":498,"extension":499,"image":500,"meta":501,"navigation":293,"path":36,"projects":502,"readingTime":245,"seo":503,"stem":504,"tags":505,"updated":508,"__hash__":509},"posts\u002Fnetlify-build-plugin-for-nuxt-dynamic-routes.md",{"type":82,"value":83,"toc":490},"minimark",[84,116,121,137,140,143,147,150,157,164,168,175,189,197,200,221,231,267,274,381,385,392,420,424,431,486],[85,86,95,113],"a",{"style":87,"href":88,"target":89,"rel":90,"title":94},"float:right;background-color:black;color:white;text-decoration:none;padding:4px 6px;font-family:-apple-system, BlinkMacSystemFont, \"San Francisco\", \"Helvetica Neue\", Helvetica, Ubuntu, Roboto, Noto, \"Segoe UI\", Arial, sans-serif;font-size:12px;font-weight:bold;line-height:1.2;display:inline-block;border-radius:3px","https:\u002F\u002Funsplash.com\u002F@mattartz?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText","_blank",[91,92,93],"nofollow","noopener","noreferrer","Download free do whatever you want high-resolution photos from Matt Artz",[96,97,99],"span",{"style":98},"display:inline-block;padding:2px 3px",[100,101,105,109],"svg",{"xmlns":102,"style":103,"viewBox":104},"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg","height:12px;width:auto;position:relative;vertical-align:middle;top:-2px;fill:white","0 0 32 32",[106,107,108],"title",{},"unsplash-logo",[110,111],"path",{"d":112},"M10 9V0h12v9H10zm12 5h10v18H0V14h10v9h12v-9z",[96,114,115],{"style":98},"Matt Artz",[117,118,120],"h2",{"id":119},"the-problem","The Problem",[122,123,124,125,130,131,136],"p",{},"I use ",[85,126,129],{"href":127,"rel":128},"https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus",[91],"Directus"," as my headless CMS of choice for several projects now. I recently added a blog to my agencies nuxt website: ",[85,132,135],{"href":133,"rel":134},"https:\u002F\u002Fwebmarken.com",[91],"webmarken",". Since several people are supposed to write content eventually I set it up with Directus as the CMS. Directus has a very convenient webhook feature so triggering the deploy at netlify whenever an article is changed or created was easy to set up.",[122,138,139],{},"The problem: even though I create the routes file on each nuxt build, netlify would always use the one in the git repository. Hence new blog posts did not show up in the sitemap. You could navigate to them one the website, but directl loading them caused a 404.",[122,141,142],{},"After several fruitless attempts to fix it with nuxt settings and build hooks I discovered netlify build plugins - and that solved the issue for me in about 30 min. Here is the brief rundown.",[117,144,146],{"id":145},"setting-up-the-build-webhooks-between-directus-and-netlify","Setting up the build webhooks between Directus and netlify",[122,148,149],{},"With the new directus this really is easy as. Just go to Settings > Webhooks and create two new webhooks for your collection: create and update. Both webhooks should POST to your Netlify build webhook address.",[122,151,152,153],{},"You can easily create one here: ",[154,155,156],"code",{},"https:\u002F\u002Fapp.netlify.com\u002Fsites\u002FYOURSITE\u002Fsettings\u002Fdeploys#build-hooks",[122,158,159],{},[160,161],"img",{"alt":162,"src":163},"old site speed","\u002Fimg\u002Fdirectus-webhook.png",[117,165,167],{"id":166},"the-netlify-build-plugin-for-dynamic-nuxt-routes","The Netlify Build Plugin for dynamic Nuxt Routes",[122,169,170,171,174],{},"Netlify Plugins are pretty straight forward. All you need is a folder in your project root - for example ",[154,172,173],{},".\u002Fbuild-plugins\u002Froutes"," - with two files:",[176,177,178,184],"ul",{},[179,180,181],"li",{},[154,182,183],{},"index.js",[179,185,186],{},[154,187,188],{},"manifest.yml",[122,190,191,192],{},"You can find out more about Netlify Build Plugins in their ",[85,193,196],{"href":194,"rel":195},"https:\u002F\u002Fdocs.netlify.com\u002Fconfigure-builds\u002Fbuild-plugins\u002Fcreate-plugins\u002F",[91],"Documentation",[122,198,199],{},"The manifest simply contains the name of your plugin:",[201,202,207],"pre",{"className":203,"code":204,"language":205,"meta":206,"style":206},"language-bash shiki shiki-themes derkinzi-tomorrow-night","name: netlify-create-routes\n","bash","",[154,208,209],{"__ignoreMap":206},[96,210,213,217],{"class":211,"line":212},"line",1,[96,214,216],{"class":215},"sHQA9","name:",[96,218,220],{"class":219},"sRYIx"," netlify-create-routes\n",[122,222,223,224,226,227,230],{},"The ",[154,225,183],{}," file exports a function in nodejs style. For this case we use the ",[154,228,229],{},"onPreBuild"," hook:",[201,232,236],{"className":233,"code":234,"language":235,"meta":206,"style":206},"language-javascript shiki shiki-themes derkinzi-tomorrow-night","module.exports = {\n  onPreBuild: async () => {\n    ...\n  },\n}\n","javascript",[154,237,238,243,249,255,261],{"__ignoreMap":206},[96,239,240],{"class":211,"line":212},[96,241,242],{},"module.exports = {\n",[96,244,246],{"class":211,"line":245},2,[96,247,248],{},"  onPreBuild: async () => {\n",[96,250,252],{"class":211,"line":251},3,[96,253,254],{},"    ...\n",[96,256,258],{"class":211,"line":257},4,[96,259,260],{},"  },\n",[96,262,264],{"class":211,"line":263},5,[96,265,266],{},"}\n",[122,268,269,270,273],{},"The logic I'm using couldn't be simpler. I'm basically reusing what I already have in my ",[154,271,272],{},"this.nuxt.hook('build:before', async (builder) => {}",". Of course you'd need to define your own API fetch and route array generation to your needs:",[201,275,277],{"className":233,"code":276,"language":235,"meta":206,"style":206},"const fetchData = require('..\u002F..\u002Fserver\u002FfetchData')\nconst createRoutes = require('..\u002F..\u002Fserver\u002FcreateRoutes')\n\nmodule.exports = {\n  onPreBuild: async () => {\n    console.log('\u002F----------ROUTES--------\u002F')\n\n    \u002F\u002F Fetch all posts data from Directus API\n    const { posts } = await fetchData()\n    console.log('Fetched Content')\n\n    \u002F\u002F Create routes array from dynamic pages from posts\n    \u002F\u002F Store array in .\u002Fstatic\u002Froutes.json\n    await createRoutes(posts)\n    console.log('New Routes created & saved')\n\n    console.log('\u002F---------\u002FROUTES--------\u002F')\n  },\n}\n",[154,278,279,284,289,295,299,303,309,314,320,326,332,337,343,349,355,361,366,372,377],{"__ignoreMap":206},[96,280,281],{"class":211,"line":212},[96,282,283],{},"const fetchData = require('..\u002F..\u002Fserver\u002FfetchData')\n",[96,285,286],{"class":211,"line":245},[96,287,288],{},"const createRoutes = require('..\u002F..\u002Fserver\u002FcreateRoutes')\n",[96,290,291],{"class":211,"line":251},[96,292,294],{"emptyLinePlaceholder":293},true,"\n",[96,296,297],{"class":211,"line":257},[96,298,242],{},[96,300,301],{"class":211,"line":263},[96,302,248],{},[96,304,306],{"class":211,"line":305},6,[96,307,308],{},"    console.log('\u002F----------ROUTES--------\u002F')\n",[96,310,312],{"class":211,"line":311},7,[96,313,294],{"emptyLinePlaceholder":293},[96,315,317],{"class":211,"line":316},8,[96,318,319],{},"    \u002F\u002F Fetch all posts data from Directus API\n",[96,321,323],{"class":211,"line":322},9,[96,324,325],{},"    const { posts } = await fetchData()\n",[96,327,329],{"class":211,"line":328},10,[96,330,331],{},"    console.log('Fetched Content')\n",[96,333,335],{"class":211,"line":334},11,[96,336,294],{"emptyLinePlaceholder":293},[96,338,340],{"class":211,"line":339},12,[96,341,342],{},"    \u002F\u002F Create routes array from dynamic pages from posts\n",[96,344,346],{"class":211,"line":345},13,[96,347,348],{},"    \u002F\u002F Store array in .\u002Fstatic\u002Froutes.json\n",[96,350,352],{"class":211,"line":351},14,[96,353,354],{},"    await createRoutes(posts)\n",[96,356,358],{"class":211,"line":357},15,[96,359,360],{},"    console.log('New Routes created & saved')\n",[96,362,364],{"class":211,"line":363},16,[96,365,294],{"emptyLinePlaceholder":293},[96,367,369],{"class":211,"line":368},17,[96,370,371],{},"    console.log('\u002F---------\u002FROUTES--------\u002F')\n",[96,373,375],{"class":211,"line":374},18,[96,376,260],{},[96,378,379],{"class":211,"line":78},[96,380,266],{},[117,382,384],{"id":383},"tell-netlify-to-use-the-plugin","Tell Netlify to use the plugin",[122,386,387,388,391],{},"The last step to make this work is to tell Netlify to use your Plugin while building the project. For this either create or simply add the following to your ",[154,389,390],{},"netlify.toml"," file in your root directory:",[201,393,395],{"className":203,"code":394,"language":205,"meta":206,"style":206},"[[plugins]]\n  package = \"\u002Fbuild-plugins\u002Froutes\"\n",[154,396,397,403],{"__ignoreMap":206},[96,398,399],{"class":211,"line":212},[96,400,402],{"class":401},"s2jRq","[[plugins]]\n",[96,404,405,408,411,414,417],{"class":211,"line":245},[96,406,407],{"class":215},"  package",[96,409,410],{"class":219}," =",[96,412,413],{"class":401}," \"",[96,415,416],{"class":219},"\u002Fbuild-plugins\u002Froutes",[96,418,419],{"class":401},"\"\n",[117,421,423],{"id":422},"use-the-routes-file-in-nuxt","Use the routes file in nuxt",[122,425,426,427,430],{},"You can then go ahead and simply use the routes file in ",[154,428,429],{},"nuxt.config.js"," like so to get everything running and generation smoothly:",[201,432,434],{"className":233,"code":433,"language":235,"meta":206,"style":206},"const routes = require('.\u002Fstatic\u002Froutes.json')\nmodule.exports = {\n  ...\n  generate: {\n    routes\n  },\n  sitemap: {\n    routes\n  }\n  ...\n}\n",[154,435,436,441,445,450,455,460,464,469,473,478,482],{"__ignoreMap":206},[96,437,438],{"class":211,"line":212},[96,439,440],{},"const routes = require('.\u002Fstatic\u002Froutes.json')\n",[96,442,443],{"class":211,"line":245},[96,444,242],{},[96,446,447],{"class":211,"line":251},[96,448,449],{},"  ...\n",[96,451,452],{"class":211,"line":257},[96,453,454],{},"  generate: {\n",[96,456,457],{"class":211,"line":263},[96,458,459],{},"    routes\n",[96,461,462],{"class":211,"line":305},[96,463,260],{},[96,465,466],{"class":211,"line":311},[96,467,468],{},"  sitemap: {\n",[96,470,471],{"class":211,"line":316},[96,472,459],{},[96,474,475],{"class":211,"line":322},[96,476,477],{},"  }\n",[96,479,480],{"class":211,"line":328},[96,481,449],{},[96,483,484],{"class":211,"line":334},[96,485,266],{},[487,488,489],"style",{},"html pre.shiki code .sHQA9, html code.shiki .sHQA9{--shiki-default:#6196CC}html pre.shiki code .sRYIx, html code.shiki .sRYIx{--shiki-default:#7EC699}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s2jRq, html code.shiki .s2jRq{--shiki-default:#CCCCCC}",{"title":206,"searchDepth":245,"depth":251,"links":491},[492,493,494,495,496],{"id":119,"depth":245,"text":120},{"id":145,"depth":245,"text":146},{"id":166,"depth":245,"text":167},{"id":383,"depth":245,"text":384},{"id":422,"depth":245,"text":423},"When you get content from a headless CMS, sometimes you need to define a routes file for your nuxt build and sitemap file to work properly. Here I show you how to do that with netlify.",false,"md","\u002Fimg\u002Fnetlify-build-plugin.jpg",{},[135],{"title":37,"description":497},"netlify-build-plugin-for-nuxt-dynamic-routes",[506,507],"nuxt","jamstack",null,"KoHI8vAZIRBFdl4AfGRaY67IF7my-UDreUnMBqHlyQY",[511,513],{"title":33,"path":32,"stem":512,"children":-1},"building-directory-website-with-ai-in-a-day",{"title":41,"path":40,"stem":514,"children":-1},"optimized-responsive-lazyloading-images-with-nuxt",[516],{"id":135,"title":135},1793264868485]