Options
crossorigin
- Type:
String
- Default:
'anonymous'
- String values:
'anonymous'
,'use-credentials'
orundefined
learn more
- Default:
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 |
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
- Default:
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: […]
}
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) |
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
- Default:
With this attribute all components that can be found under nuxt-speedkit/components
can be registered globally.
Learn more @nuxt/components
Available components
Global Name | Import Path | |
---|---|---|
SpeedkitIframe | nuxt-speedkit/components/SpeedkitIframe | Source |
SpeedkitLayer | nuxt-speedkit/components/SpeedkitLayer | Source |
SpeedkitPicture | nuxt-speedkit/components/SpeedkitPicture | Source |
SpeedkitYoutube | nuxt-speedkit/components/SpeedkitYoutube | Source |
AbstractIntersectionObserver | nuxt-speedkit/components/abstracts/IntersectionObserver | Source |
AbstractOnlySsr | nuxt-speedkit/components/abstracts/OnlySsr | Source |
ExperimentalSpeedkitPicture | nuxt-speedkit/components/experimental/SpeedkitPicture | Source |
ExperimentalSpeedkitYoutube | nuxt-speedkit/components/experimental/SpeedkitYoutube | Source |
componentPrefix
- Type:
String
- Default:
undefined
- Default:
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
- Default:
If set, @nuxt/image
will not be integrated.
⚠️ The following components can no longer be used: