Generate Your Pages Statically Without using Payload Extractors

Generate Your Pages Statically Without using Payload Extractors

nuxt-page-generator-helper . 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.

nuxt-page-generator-helper

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

Download Details:

Author: GrabarzUndPartner

Demo: https://grabarzundpartner.github.io/nuxt-page-generator-helper/

Source Code: https://github.com/GrabarzUndPartner/nuxt-page-generator-helper

vue vuejs nuxtjs javascript

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Veluxi Starter - Vue JS Landing Page Template .Veluxi Vue.js Starter Project with NuxtJS and Vuetify

Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

nuxt-storyblok-boilerplate .Personal portfolio using VueJS, NuxtJS, Storyblok CMS, Axios

Classic Mini Cooper owners built with VueJS and NuxtJS

Classic Mini DIY is the best place to find all the reference material, how to videos, and much much more for your Classic Mini

Boilerplate with Foundations for Sites in NuxtJS

Nuxtation Boilerplate with Foundations for Sites in NuxtJS This repository is one example of how to integrate Foundation for Sites into the progressive Vue.js framework, the Nuxt.js project. A Foundation + NuxtJS project use webpack4 and babel7