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 π
β οΈ 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.
Add nuxt-page-generator-helper
entry to gitignore.
Add nuxt-page-generator-helper
dependency to your project
yarn add nuxt-page-generator-helper # or npm install nuxt-page-generator-helper
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
}
}
}]
]
}
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 |
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 |
local-json
Adapter local-json
is used to work with local JSON
files.
π All plugins available in context
client
andserver
.
async
$getGeneratorRouteData
Retrieves the data for the current route using the adapter method getRoute
.
Recommendation is to use Page
asyncData
for the request.
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.
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.
export default (ctx) => {
ctx.$getGeneratorLayoutData = () => {
return getLayout(ctx.$getGeneratorOptions());
}
}
Coming Soonβ¦
But you can have a look at the module example. Example Directory
yarn install
or npm install
npm run start:generate
or look here
yarn install
or npm install
npm run dev
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