Options

crossorigin

• Type: String
  • Default: 'anonymous'
  • String values: 'anonymous', 'use-credentials' or undefined learn more

Sets the global crossorigin value of the nuxt-speedkit preloads.
The default value is the crossorigin from the Render Configuration.

detection

• Type: Object

These options can be used to define which initial checks are to be carried out when using the SpeedkitLayer.

{
  performance: true,
  browserSupport: true
}

Key	Type	Required	Description	Default
performance	Boolean	yes	Checks whether the minimum performance requirement has been met. If this is not the case, the SpeedkitLayer is displayed.	true
browserSupport	Boolean	yes	Überprüft, ob die Webseite über einen supported Browser besucht wird. Handelt es sich hierbei um einen unsupported Browser, wird der SpeedkitLayer eingeblendet.	true

::alert{type="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. An explicit lighthouse check via user agent can be optionally added.

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

device

• Type: Object

Describes the minimum hardware requirements that a device should meet to display 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

Defines the max. time (ms) for the FCP. If the specified value is exceeded, the SpeedkitLayer is displayed. If the browser does not yet grant access to the FCP, the DCL is evaluated as an alternative.

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

Key	Type	Required	Description	Default
fcp	Number	yes	Max. First contentful paint duration in ms learn More	800
dcl	Number	yes	Max. Dom content load duration in ms	1200

lighthouseDetectionByUserAgent

• Type: Boolean
  • Default: false

Fallback to detect lighthouse user agent when the other ressources like the hardware detect don't work anymore.

::alert{type="warning"} We recommend that you disable the explicit lighthouse check . In the description of the SpeedkitLayer you will find a more detailed description of the trick that can be used to detect a lighthouse test. ::

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)

::alert{type="warning"} Prevent sizing discrepancy between your custom and fallback font for perfect swap and reduction of layout shifts. 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, …

componentAutoImport

• Type: Boolean
  • Default: false

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

Available components

Global Name	Import Path
SpeedkitIframe	#speedkit/components/SpeedkitIframe	Source
SpeedkitLayer	#speedkit/components/SpeedkitLayer	Source
SpeedkitPicture	#speedkit/components/SpeedkitPicture	Source
SpeedkitYoutube	#speedkit/components/SpeedkitYoutube	Source
AbstractIntersectionObserver	#speedkit/components/abstracts/IntersectionObserver	Source
AbstractOnlySsr	#speedkit/components/abstracts/OnlySsr	Source
ExperimentalSpeedkitPicture	#speedkit/components/experimental/SpeedkitPicture	Source
ExperimentalSpeedkitYoutube	#speedkit/components/experimental/SpeedkitYoutube	Source

componentPrefix

• Type: String
  • Default: undefined

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

Example: SpeedkitPicture => PrefixSpeedkitPicture

lazyOffset

• Type: Object

Global option for the IntersectionObserver built into the nuxt-speedkit.

{
  // rootMargin for speedkitComponents components
  component: '0%',
  // rootMargin for SpeedkitPicture and SpeedkitImage
  asset: '0%' 
}

Key	Type	Required	Description	Default
component	String	yes	rootMargin value for speedkitComponents	0%
asset	String	yes	rootMargin value for all static ressources (v-font und SpeedkitPicture)	0%

disableNuxtImage

• Type: Boolean
  • Default: false

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

⚠️  The following components can no longer be used:

• SpeedkitPicture (Experimental)
• SpeedkitYoutube (Experimental)