- reduced bandwidth
- weak hardware
- unsupported browser
occurs, the process is paused and only continued or cancelled after a user interaction in the layer.
The layer is placed once in the layout (e.g.
The included SpeedkitLayer serves as a wrapper and must be filled according to the template, see example component.
The content contains messages and buttons that are displayed in the respective event.
Messages and buttons are defined with an
id, these are set to
display: none; by default via CSS.
The messages are elements that are displayed for the relevant events.
Initially, all IDs are set to
display: none;, so no message is visible.
When an event is triggered, the relevant message is displayed via the ID using the style attribute
|Connection bandwidth is too low.|
|User hardware are not sufficient.|
|User Browser is not supported by |
<!-- initial --> <div id="nuxt-speedkit-message-unsupported-browser"> Your browser is not supported! </div> <!-- active --> <div id="nuxt-speedkit-message-unsupported-browser" style="display: block;"> Your browser is not supported! </div>
The buttons are interaction elements for the user with which he can make his choice at the relevant event.
Initially, all IDs except for
nuxt-speedkit-button-nojs are set to
When an event is triggered, the relevant button is displayed via the ID using the style attribute
More information under Force App initialization
<label for="nuxt-speedkit-layer-close"> Close Layer </label>
The layer can be closed via a
for attribute with the
Force App initialization
For Unsupported-Browser and Insufficient Hardware events, an
onclick event must also be set with the
In the event, the global variable
__NUXT_SPEEDKIT_AUTO_INIT__ must be set to