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
}

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 }
}

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)
}

lighthouseDetectionByUserAgent

• Type: Boolean
  • Default: false

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

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

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' }
  ]
}

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' }
]

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

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%' 
}

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)