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
}
KeyTypeRequiredDescriptionDefault
performanceBooleanyesChecks whether the minimum performance requirement has been met. If this is not the case, the SpeedkitLayer is displayed.true
browserSupportBooleanyesÜberprüft, ob die Webseite über einen supported Browser besucht wird. Handelt es sich hierbei um einen unsupported Browser, wird der SpeedkitLayer eingeblendet.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. 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 }
}
KeyTypeRequiredDescriptionDefault
hardwareConcurrencyObjectyesmin/max number of CPUs{ min: 2, max: 48 }
deviceMemoryObjectyesmin 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)
}
KeyTypeRequiredDescriptionDefault
fcpNumberyesMax. First contentful paint duration in ms learn More800
dclNumberyesMax. Dom content load duration in ms1200

lighthouseDetectionByUserAgent

  • Type: Boolean
    • Default: false

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

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: []
}
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, …

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

Available components

Global NameImport Path
SpeedkitIframenuxt-speedkit/components/SpeedkitIframeSource
SpeedkitLayernuxt-speedkit/components/SpeedkitLayerSource
SpeedkitPicturenuxt-speedkit/components/SpeedkitPictureSource
SpeedkitYoutubenuxt-speedkit/components/SpeedkitYoutubeSource
AbstractIntersectionObservernuxt-speedkit/components/abstracts/IntersectionObserverSource
AbstractOnlySsrnuxt-speedkit/components/abstracts/OnlySsrSource
ExperimentalSpeedkitPicturenuxt-speedkit/components/experimental/SpeedkitPictureSource
ExperimentalSpeedkitYoutubenuxt-speedkit/components/experimental/SpeedkitYoutubeSource

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%' 
}
KeyTypeRequiredDescriptionDefault
componentStringyesrootMargin value for speedkitComponents0%
assetStringyesrootMargin 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:

Edit this page on GitHub Updated at Tue, Oct 12, 2021