Have ideas to improve npm?Join in the discussion! »

    nuxt-page-generator-helper

    1.6.3 • Public • Published

    nuxt-page-generator-helper

    Grabarz & Partner - Module

    Master

    npm version npm downloads Renovate - Status License

    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 
    1. 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

    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

    Install

    npm i nuxt-page-generator-helper

    DownloadsWeekly Downloads

    1

    Version

    1.6.3

    License

    MIT

    Unpacked Size

    53.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar