Skip to content

Commit 7658ad3

Browse files
authored
docs(en): add watch option documentation for dynamic routes (#4987)
1 parent d07bcca commit 7658ad3

File tree

1 file changed

+40
-0
lines changed

1 file changed

+40
-0
lines changed

docs/en/guide/routing.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -336,6 +336,46 @@ export default {
336336
}
337337
```
338338

339+
### Watching Template and Data Files
340+
341+
When generating page content from templates or external data sources, you can use the watch option to automatically rebuild pages when those files change during development:
342+
343+
```js
344+
// posts/[slug].paths.js
345+
import fs from 'node:fs'
346+
import { renderTemplate } from './templates/renderer.js'
347+
348+
export default {
349+
// Watch for changes to template files and data sources
350+
watch: [
351+
'./templates/**/*.njk', // Template files
352+
'../data/**/*.json' // Data files
353+
],
354+
355+
paths(watchedFiles) {
356+
// watchedFiles will be an array of absolute paths of the matched files
357+
// Read data files to generate routes
358+
const dataFiles = watchedFiles.filter(file => file.endsWith('.json'))
359+
360+
return dataFiles.map(file => {
361+
const data = JSON.parse(fs.readFileSync(file, 'utf-8'))
362+
363+
return {
364+
params: { slug: data.slug },
365+
content: renderTemplate(data) // Use template to generate content
366+
}
367+
})
368+
}
369+
}
370+
```
371+
372+
The `watch` option works the same way as in [data loaders](./data-loading#data-from-local-files):
373+
374+
- Accepts [glob patterns](https://github.com/mrmlnc/fast-glob#pattern-syntax) to match files
375+
- Patterns are relative to the `.paths.js` file itself
376+
- Changes to watched files trigger page regeneration and HMR during development
377+
- In production builds, all pages are generated once regardless of watch configuration
378+
339379
### Accessing Params in Page
340380

341381
You can use the params to pass additional data to each page. The Markdown route file can access the current page params in Vue expressions via the `$params` global property:

0 commit comments

Comments
 (0)