Options

crossorigin

• Type: String, Boolean
  • Default: 'anonymous'
  • Valid values: anonymous, use-credentials, '', true, false

Sets the global crossorigin value of the Nuxt Booster preloads.
The default value is the crossorigin value from the Render Configuration.

Set false to disable the crossorigin.

MDN - HTML.Attributes.crossorigin

optimizePreloads

• Type: Boolean
  • Default: true

Activating this option optimizes the initial script preloads and removes unnecessary loads.

The following NuxtJS settings are made or overwritten in the nuxt.config:

Property	Value
nuxt.options.generate.manifest	false
nuxt.options.render.resourceHints	true
nuxt.options.render.asyncScripts	true
nuxt.options.render.http2.push	false

detection

• Type: Object

These options can be used to define the initial checks to display the BoosterLayer. The prerequisite are that the BoosterLayer has been embedded into the layout.

{
  performance: true,
  browserSupport: true
}

Key	Type	Required	Description	Default
performance	Boolean	yes	Checking whether the minimum characteristic values have been reached. If the test is negative, the BoosterLayer will be displayed.	true
browserSupport	Boolean	yes	Check if the current browser on client side is supported. If the test is negative, the BoosterLayer will be displayed.	true

INFO

For the browser support detection, the default Browserslist of the NuxtJS configuration is used.

performanceMetrics

• Type: Object

With the help of the metrics, the actual performance check on client side can be configured.

{
  device: {
    hardwareConcurrency: { min: 2, max: 48 },
    deviceMemory: { min: 2 }
  },
  timing: {
    fcp: 800,
    dcl: 1200 // fallback if fcp is not available (safari)
  }
}

device

• Type: Object

Definition of the minimum hardware requirements for visiting the website.

{
  hardwareConcurrency: { min: 2, max: 48 },
  deviceMemory: { min: 2 }
}

Key	Type	Required	Description	Default
hardwareConcurrency	Object	yes	min/max number of CPUs	{ min: 2, max: 48 }
deviceMemory	Object	yes	min size of memory	{ min: 2 }

timing

• Type: Object

Definition of the max. FCP duration (ms). If the specified value is exceeded, the BoosterLayer will be displayed. If the browser does not grant access to the FCP, as fallback the DCL will be evaluated.

{
  fcp: 800,
  dcl: 1200 // fallback if fcp is not available (safari)
}

Key	Type	Required	Description	Default
fcp	Number	yes	Max. FCP duration in ms learn More	800
dcl	Number	yes	Max. DCL duration in ms	1200

fonts

• Type: Array

List of all font families used in the project. Only the fonts that are listed in the configuration can be retrieved and integrated via $fonts.getFont(...).

[
  {
    family: 'Font A',
    locals: ['Font A'],
    fallback: ['Arial', 'sans-serif'],
    variances: […]
  },
  {
    family: 'Font B',
    locals: ['Font B'],
    fallback: ['Arial', 'sans-serif'],
    variances: […]
  }
]

Font-Family

• Type: Object

Describes a font family with all its variants.

{
  family: 'Font A',
  locals: ['Font A'],
  fallback: ['Arial', 'sans-serif'],
  variances: […]
}

Key	Type	Required	Description
family	String	yes	name of the font family
locals	Array	yes	system font name of the specified font family
fallback	Array	yes	fallback fonts e.g. ['Arial', 'sans-serif']
variances	Array	yes	list of font family variants (e.g. Bold, Italic)

WARNING

Prevent sizing discrepancy between your custom and fallback font for perfect swap and reduction of layout shifts. Learn more

Font-Variance

• Type: Object

A font variant describes an instance of a font family and is used to generate the FontFace declaration. Font variants differ in style and weight.

{
  style: 'normal',
  weight: 400,
  sources: [
    { src: '@/assets/fonts/font-a-regular.woff', type:'woff' },
    { src: '@/assets/fonts/font-a-regular.woff2', type:'woff2' }
  ]
}

Key	Type	Required	Description
style	String	yes	font-style of FontFace, e.g. normal, italic
weight	String or Number	yes	font-weight of FontFace, e.g. 400, normal
sources	Array	yes	list of all font files assigned to the variant (sources)

sources

• Type: Array

List of all available font files of a font family variation.

[
  { src: '@/assets/fonts/font-a-regular.woff', type:'woff' },
  { src: '@/assets/fonts/font-a-regular.woff2', type:'woff2' }
]

Key	Type	Required	Value
src	String	yes	path to a font file, the use of aliases is possible
type	String	yes	file format of the specified file, e.g. woff, woff2, …

targetFormats

• Type: Array
  • Default: ['webp', 'avif', 'jpg|jpeg|png|gif']

Sets the default formats for the BoosterPicture.

Can be overridden in the BoosterPicture via the formats property.

For png, jpeg and gif formats we have added the | operator in the declaration.
This adjusts the destination format to the source format.

Example

Bad

The declaration below generates a png, jpeg and gif (destination format) for each jpeg (source format). The same applies to a png and a gif as source format. However, this is not practical for the source specifications in the Picture.

{
  targetFormats: ['jpg', 'jpeg', 'png', 'gif']
}

Good

Based on the source format, the appropriate target format is created using the declaration described below.

{
  targetFormats: ['jpg|jpeg|png|gif']
}

INFO

For the avif and webp formats the | operator is not needed, because these two image formats do not depend on the source format, as it is the case for png, jpeg and gif.

componentAutoImport

• Type: Boolean
  • Default: false

With this attribute all components that can be found under #booster/components can be registered globally. Learn more @nuxt/components.

WARNING

This option is not recommended if you want to achieve a lighthouse score of 100/100.

Available components

Global Name	Import Path
BoosterIframe	#booster/components/BoosterIframe	Source
BoosterLayer	#booster/components/BoosterLayer	Source
BoosterPicture	#booster/components/BoosterPicture	Source
BoosterYoutube	#booster/components/BoosterYoutube	Source
AbstractComponentObserver	#booster/components/abstracts/ComponentObserver	Source
AbstractOnlySsr	#booster/components/abstracts/OnlySsr	Source

componentPrefix

• Type: String
  • Default: undefined

Defines a prefix for the module components, important for auto import e.g. option componentAutoImport.

Example: BoosterPicture => PrefixBoosterPicture

lazyOffset

• Type: Object

Global option for the IntersectionObserver built into the Nuxt Booster.

{
  component: '0%',
  asset: '0%' 
}

Key	Type	Required	Description	Default
component	String	yes	rootMargin value for BoosterHydrate.	0%
asset	String	yes	rootMargin value for all static ressources (v-font, BoosterPicture & BoosterImage).	0%

loader

• Type: Object

Defines the global built-in LoadingSpinner.

{
  dataUri: undefined,
  size: '100px',
  backgroundColor: 'grey'
}

Key	Type	Required	Description	Default
dataUri	String	no	Defines the source of the loader. (e.g. @/assets/spinner/three-circles.svg)	undefined
size	String	no	Defines the size of the loader. Use css background-size definition.	100px
backgroundColor	String	no	Defines the background color of the loader. Use css color definition.	grey

disableNuxtImage

• Type: Boolean
  • Default: false

If set, @nuxt/image will not be integrated.

DANGER

Note that the use of BoosterImage, BoosterPicture, BoosterVimeo and BoosterYoutube is not supported if @nuxt/image is not integrated.