Options

crossorigin

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

Sets the global crossorigin value of the Nuxt Speedkit 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:

PropertyValue
nuxt.options.generate.manifestfalse
nuxt.options.render.resourceHintstrue
nuxt.options.render.asyncScriptstrue
nuxt.options.render.http2.pushfalse

detection

  • Type: Object

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

{
  performance: true,
  browserSupport: true
}
KeyTypeRequiredDescriptionDefault
performanceBooleanyesChecking whether the minimum characteristic values have been reached. If the test is negative, the SpeedkitLayer will be displayed.true
browserSupportBooleanyesCheck if the current browser on client side is supported. If the test is negative, the SpeedkitLayer will be displayed.true
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 }
}
KeyTypeRequiredDescriptionDefault
hardwareConcurrencyObjectyesmin/max number of CPUs{ min: 2, max: 48 }
deviceMemoryObjectyesmin size of memory{ min: 2 }

timing

  • Type: Object

Definition of the max. FCP duration (ms). If the specified value is exceeded, the SpeedkitLayer 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)
}
KeyTypeRequiredDescriptionDefault
fcpNumberyesMax. FCP duration in ms learn More800
dclNumberyesMax. DCL duration in ms1200

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: []
}
KeyTypeRequiredDescription
familyStringyesname of the font family
localsArrayyessystem font name of the specified font family
fallbackArrayyesfallback fonts e.g. ['Arial', 'sans-serif']
variancesArrayyeslist of font family variants (e.g. Bold, Italic)
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' }
  ]
}
KeyTypeRequiredDescription
styleStringyesfont-style of FontFace, e.g. normal, italic
weightString or Numberyesfont-weight of FontFace, e.g. 400, normal
sourcesArrayyeslist 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' }
]
KeyTypeRequiredValue
srcStringyespath to a font file, the use of aliases is possible
typeStringyesfile 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 SpeedkitPicture.

Can be overridden in the SpeedkitPicture 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']
}
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 nuxt-speedkit/components can be registered globally. Learn more @nuxt/components.

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

Available components

Global NameImport Path
SpeedkitIframenuxt-speedkit/components/SpeedkitIframeSource
SpeedkitLayernuxt-speedkit/components/SpeedkitLayerSource
SpeedkitPicturenuxt-speedkit/components/SpeedkitPictureSource
SpeedkitYoutubenuxt-speedkit/components/SpeedkitYoutubeSource
AbstractComponentObservernuxt-speedkit/components/abstracts/ComponentObserverSource
AbstractOnlySsrnuxt-speedkit/components/abstracts/OnlySsrSource

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.

{
  component: '0%',
  asset: '0%' 
}
KeyTypeRequiredDescriptionDefault
componentStringyesrootMargin value for SpeedkitHydrate.0%
assetStringyesrootMargin value for all static ressources (v-font, SpeedkitPicture & SpeedkitImage).0%

loader

  • Type: Object

Defines the global built-in LoadingSpinner.

{
  dataUri: undefined,
  size: '100px',
  backgroundColor: 'grey'
}
KeyTypeRequiredDescriptionDefault
dataUriStringnoDefines the source of the loader. (e.g. @/assets/spinner/three-circles.svg)undefined
sizeStringnoDefines the size of the loader. Use css background-size definition.100px
backgroundColorStringnoDefines the background color of the loader. Use css color definition.grey

disableNuxtImage

  • Type: Boolean
    • Default: false

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

Note that the use of SpeedkitImage , SpeedkitPicture , SpeedkitVimeo and SpeedkitYoutube is not supported if @nuxt/image is not integrated.
Edit this page on GitHub Updated at Wed, Dec 7, 2022