Back to templates

Template details

Nuxt Page Generator Helper

Generate your pages statically without using payload extractors.

About this template

Nuxt Page Generator Helper is a Nuxt.js module by Grabarz & Partner that generates static Vue pages from adapter-provided route, page, and layout data, so a site can be built without a payload-extractor, and embeds components with targeted, chunk-splitting-friendly integration.

What is Nuxt Page Generator Helper?

Nuxt Page Generator Helper is an npm-published, MIT-licensed Nuxt.js module created by Grabarz & Partner. It takes an adapter (a file path or import with functions for querying the page structure with content) plus adapter options that supply the getRoute, getRoutes, and getLayout calls and the PATH specification, and it produces generated Vue pages during nuxt build and nuxt generate. The module runs inside the Nuxt.js ecosystem and automatically includes nuxt-i18n and @nuxtjs/sitemap, so those packages must not be installed separately.

What makes Nuxt Page Generator Helper stand out?

  • Payload-extractor-free generation — generates static Vue pages directly from adapter data instead of using a payload-extractor, so every resource that is not loaded stays unloaded.
  • Automatic nuxt-i18n integration — nuxt-i18n is a core component and is configured through the module's nuxtI18n option; if unused, it should be limited to one default locale.
  • Included sitemap support — @nuxtjs/sitemap is bundled and configured with a sitemap option that supports path, hostname, cacheTime, gzip, exclude, routes, and defaults such as changefreq, priority, and lastmodrealtime.
  • Lazy hydration controls — built on vue-lazy-hydration, with lazyHydrateEnable, lazyHydrateRootMargin (default 80px), and lazyHydrateMaxIdle (default 1) options that defer component initialization until idle or until components approach the visible area.
  • Async component loading — asyncComponentLoad defaults to true, so page components are loaded asynchronously to support better chunk splitting.
  • Client and server plugins — exposes $getGeneratorRouteData, $getGeneratorLayoutData, and $getGeneratorOptions in both client and server contexts, with documented usage in page asyncData and in the store's nuxtServerInit.
  • Route and layout controls — ignoreRoutes, cleanRoutes, routesCache, and layoutCache decide which route names are skipped, whether previously registered routes are removed, and whether adapter results are cached locally.
  • Example local-json adapter — includes a local-json adapter in the example directory for working with local JSON files.

Who should use Nuxt Page Generator Helper?

  • Nuxt developers building static sites — generate Vue pages at build or generate time from structured adapter data instead of performing dynamic payload extraction at runtime.
  • Teams feeding content from JSON or a CMS — write a custom adapter (or adapt the bundled local-json example) to map content to routes and layouts, then run nuxt generate to output static pages.
  • Performance-focused frontend teams — combine async component loading with lazy hydration to control exactly when components initialize and to split JavaScript chunks per page.

What can you do with Nuxt Page Generator Helper?

  • Generate static pages from route data — register the module in nuxt.config.js with an adapter, adapter options, and ignoreRoutes, then run nuxt build or nuxt generate to produce the Vue pages.
  • Load current-route content per page — call $getGeneratorRouteData() inside a page's asyncData hook to retrieve data for the current route through the adapter's getRoute method.
  • Load layout data globally — call $getGeneratorLayoutData() in the store's nuxtServerInit action, or in a page fetch hook during development, to pull data through the adapter's getLayout method.
  • Defer component initialization — set asyncComponentLoad and lazyHydrateEnable so components initialize when idle or when close to the visible area, with lazyHydrateMaxIdle limiting how many initialize on idle.

How does Nuxt Page Generator Helper work?

The module is added to the modules array of nuxt.config.js with an adapter and options. During nuxt build or nuxt generate, it queries the adapter's getRoutes, getRoute, and getLayout calls to assemble page and layout data, generates the Vue pages, and extends the router's routes while honoring ignoreRoutes. In development mode (nuxt), page generation is skipped and dynamicContent defaults to true so content is reloaded dynamically instead.

FAQ

Is Nuxt Page Generator Helper still maintained?

No. The README carries a notice that the project is no longer maintained. The source remains available on GitHub and npm under the MIT License, and the example adapter plus adapter documentation can still be used as a reference.

Is Nuxt Page Generator Helper free?

Yes, the module is released under the MIT License.

Does Nuxt Page Generator Helper work with nuxt-i18n?

nuxt-i18n is a core component of the module and must not be included separately. All of its settings are passed through the module's nuxtI18n option, including locales, defaultLocale, parsePages, strategy, and vueI18n messages.

When are Vue pages generated?

Per the module's build matrix, Vue pages are generated during nuxt build and nuxt generate. The plain nuxt development command and nuxt start do not generate Vue pages.

screenshot of Nuxt Page Generator Helper on template0.com