nuxt-page-generator-helper

⚠️ ⚠️ ⚠️ NOTICE: The project is no longer maintained

---

A helper for the generated static pages and target oriented integration of components.

Generate your static pages without using payload-extractor. Integrate your components on the page with targeted embedding and to enable the best chunk splitting.

Every not loaded resource is a good resource 🎉

📖 Release Notes

Setup

⚠️ Important: nuxt-i18n and @nuxtjs/sitemap must not be included separately.
nuxt-page-generator-helper automatically includes the modules and offers full configurability via the module options.

nuxt-i18n is a core component, if not used limit it to a default language.

1. Add nuxt-page-generator-helper entry to gitignore.

2. Add nuxt-page-generator-helper dependency to your project

yarn add nuxt-page-generator-helper # or npm install nuxt-page-generator-helper

3. Add nuxt-page-generator-helper to the modules section of nuxt.config.js

{
  modules: [

    ['nuxt-page-generator-helper', {
      debug: true,
      dynamicContent: false,
      adapter: require('./adapter/local-json'),
      adapterOptions: {},
      componentPath: '@/components/organisms',
      pageExtend: '@/extends/PageBuild',
      layoutCache: false,
      routesCache: false,
      ignoreRoutes: [
        'index',
        'page',
        'nested-page'
      ],
      nuxtI18n: {
        locales: [
          {
            code: 'en',
            iso: 'en'
          },
          {
            code: 'de',
            iso: 'de'
          }
        ],
        parsePages: true,
        defaultLocale: 'en',
        strategy: 'prefix_except_default',
        seo: false,
        vueI18nLoader: false,
        vueI18n: {
          fallbackLocale: 'en',
          messages: {
            en: require('./globals/locales/en.json'),
            de: require('./globals/locales/de.json')
          }
        }
      },
      sitemap: {
        path: 'sitemap.xml',
        hostname: 'http://localhost',
        cacheTime: 1000 * 60 * 15,
        gzip: false,
        exclude: [],
        routes: [],
        defaults: {
          changefreq: 'daily',
          priority: 1,
          lastmod: new Date(),
          lastmodrealtime: true
        }
      }
    }]

  ]
}

Options

Property	Type	Description	Default Value	Required
debug	Boolean	Debug-Mode	false	false
dynamicContent	Boolean	If set, the content is reloaded dynamically, no pages are generated.	development => true production => false	false
adapter	Object, String	File path or import with functions for querying the page structure with content.	null	true
adapterOptions	Object	Adapter to retrieve the payloads. Contains the calls getRoute, getRoutes, getLayout and path specification (PATH).	null	true
pageExtend	Object	Path to the page extension that is used during generation.	nuxt-page-generator-helper/PageExtend.vue	false
componentPath	String	Component src Path. Is required for embedding specified components in a page.	@/components	false
componentPrefix	String	Prefix for component imports in generated pages. Example: Component Text -> Component PrefixText	prefix	false
asyncComponentLoad	Boolean	When set, components of a page are loaded asynchronously.	true	false
lazyHydrateEnable	Boolean	Components that can be reloaded can be controlled with LazyHydration. Example: With the setting maxEagerComponents: 1, the first component is initialized at whenIdle. All others at whenVisible. vue-lazy-hydration	true	false
lazyHydrateRootMargin	String	Specifies when the whenVisible event is triggered. Example: Component initialization occurs, Component is less than 80px away from the visible area.	80px	false
lazyHydrateMaxIdle	Number	Specifies the number of components that are initialized by LazyHydrate whenIdle. Important: Only active if asyncComponentLoad is set.	1	false
layoutCache	Boolean	If active, the adapter result is stored locally for layout.	false	false
routesCache	Boolean	If active, the adapter result is stored local for routes.	false	false
ignoreRoutes	Array	List of route names, to be ignore by routes extend. Example: ['index', 'page', 'nested-page']	null	true
cleanRoutes	Boolean	If set, all already registered routes will be removed from the list.	false	false
nuxtI18n	Object	Configuration for nuxt-i18n		true
sitemap	Object	Configuration for @nuxtjs/sitemap		false

Build matrix of the page components generation

Command	Generate Vue-Pages	isDev	generate	build
nuxt	false	true	false	true
nuxt build	true	false	false	true
nuxt start	false	false	false	false
nuxt generate	true	false	true	true

Adapters

📖 Adapter Docs

Adapter local-json

Adapter local-json is used to work with local JSON files.

📖 Sources

Plugins

👁 All plugins available in context client and server.

async $getGeneratorRouteData

Retrieves the data for the current route using the adapter method getRoute.

Recommendation is to use Page asyncData for the request.

Page usage example

export default {
  asyncData ({ $getGeneratorRouteData }) {
    return $getGeneratorRouteData()
  }
}

async $getGeneratorLayoutData

Retrieves the data for the layout using the adapter method getLayout.

Recommendation is to use Store nuxtInitServer for the request. For development, the call can also be placed in the dev extension of the page in the fetch method.

Store usage example

nuxtServerInit

export const actions = {
  async nuxtServerInit ({ dispatch }, { $getGeneratorLayoutData }) {
    dispatch('layout/setData', await $getGeneratorLayoutData())
  }
}

fetch

export default {
  async fetch ({ store, $getGeneratorLayoutData }) {
    store.dispatch('layout/setData', await $getGeneratorLayoutData())
  }
}

$getGeneratorOptions

Gets the adapter settings.

Plugin usage example

export default (ctx) => {
  ctx.$getGeneratorLayoutData = () => {
    return getLayout(ctx.$getGeneratorOptions());
  }
}

Usage

Coming Soon...

But you can have a look at the module example. Example Directory

Preview

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Build and start with express npm run start:generate
4. Open http://127.0.0.1:3000 in Browser.

or look here

• Preview
• Report Client
• Report Modern
• Report Server

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License