diff --git a/404.html b/404.html index 005a55eea3..d7f9ae6954 100644 --- a/404.html +++ b/404.html @@ -15,7 +15,7 @@
- + \ No newline at end of file diff --git a/assets/components_weak-hardware-overlay.md.Bj2U2oqy.js b/assets/components_weak-hardware-overlay.md.D7G-6lQd.js similarity index 97% rename from assets/components_weak-hardware-overlay.md.Bj2U2oqy.js rename to assets/components_weak-hardware-overlay.md.D7G-6lQd.js index 523f6d8dbc..5fcd5c7496 100644 --- a/assets/components_weak-hardware-overlay.md.Bj2U2oqy.js +++ b/assets/components_weak-hardware-overlay.md.D7G-6lQd.js @@ -1,4 +1,4 @@ -import{_ as a,c as n,j as s,a as t,t as e,W as l,o as h}from"./chunks/framework.DAQBv1cP.js";const m=JSON.parse('{"title":"WeakHardwareOverlay","description":"","frontmatter":{"title":"WeakHardwareOverlay"},"headers":[],"relativePath":"components/weak-hardware-overlay.md","filePath":"components/weak-hardware-overlay.md"}'),p={name:"components/weak-hardware-overlay.md"},k={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=l(`

The WeakHardwareOverlay is used in components that are affected by the BoosterLayer event Weak Hardware. (Example: Component requires the execution of mounted for functionality.)

INFO

The performance issue event occurs when initialization determines that the client is overloaded with execution and the user has confirmed the .nuxt-booster-button-init-reduced-view button in the BoosterLayer.

Learn more about BoosterLayer interactions)

Basically, the overlay is used to make content visible when the Weak Hardware has occurred, if this does not occur, the overlay is not visible.

It is recommended to include an interaction element in the overlay that allows the user to switch to the normal state. For this the interaction element must get the Style Class .nuxt-booster-button-init-app and reacts on click with the initialization of the app.

Example ​

Example of defining a custom WeakHardwareOverlay component and placing it in a target component that is affected by the Weak Hardware event.

Customize Overlay ​

vue
<template>
+import{_ as a,c as n,j as s,a as t,t as e,W as l,o as h}from"./chunks/framework.DAQBv1cP.js";const m=JSON.parse('{"title":"WeakHardwareOverlay","description":"","frontmatter":{"title":"WeakHardwareOverlay"},"headers":[],"relativePath":"components/weak-hardware-overlay.md","filePath":"components/weak-hardware-overlay.md"}'),p={name:"components/weak-hardware-overlay.md"},k={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=l(`
The WeakHardwareOverlay is used in components that are affected by the BoosterLayer event Weak Hardware. (Example: Component requires the execution of mounted for functionality.)
INFO
The performance issue event occurs when initialization determines that the client is overloaded with execution and the user has confirmed the .nuxt-booster-button-init-reduced-view button in the BoosterLayer.
Learn more about BoosterLayer interactions)
Basically, the overlay is used to make content visible when the Weak Hardware has occurred, if this does not occur, the overlay is not visible.
It is recommended to include an interaction element in the overlay that allows the user to switch to the normal state. For this the interaction element must get the Style Class .nuxt-booster-button-init-app and reacts on click with the initialization of the app.
Example ​
Example of defining a custom WeakHardwareOverlay component and placing it in a target component that is affected by the Weak Hardware event.
Customize Overlay ​
vue
<template>
   <booster-weak-hardware-overlay>
     To improve your experience, extensive features have been disabled.<br>
     <button class="nuxt-booster-button-init-app">
@@ -22,7 +22,7 @@ import{_ as a,c as n,j as s,a as t,t as e,W as l,o as h}from"./chunks/framework.
   background: rgb(0 0 0 / 60%);
   backdrop-filter: blur(em(2px));
 }
-</style>
Usage Overlay ​
vue
<template>
+</style>
Usage Overlay ​
vue
<template>
   <div>
     <div ref="player" />
     <weak-hardware-overlay />
@@ -47,4 +47,4 @@ import{_ as a,c as n,j as s,a as t,t as e,W as l,o as h}from"./chunks/framework.
   background: rgb(0 0 0 / 60%);
   backdrop-filter: blur(2px);
 }
-</style>
`,10);function d(i,o,c,y,g,u){return h(),n("div",null,[s("h1",k,[t(e(i.$frontmatter.title)+" ",1),E]),r])}const b=a(p,[["render",d]]);export{m as __pageData,b as default};
+</style>
`,10);function d(i,o,c,g,y,u){return h(),n("div",null,[s("h1",k,[t(e(i.$frontmatter.title)+" ",1),E]),r])}const b=a(p,[["render",d]]);export{m as __pageData,b as default}; diff --git a/assets/components_weak-hardware-overlay.md.Bj2U2oqy.lean.js b/assets/components_weak-hardware-overlay.md.D7G-6lQd.lean.js similarity index 90% rename from assets/components_weak-hardware-overlay.md.Bj2U2oqy.lean.js rename to assets/components_weak-hardware-overlay.md.D7G-6lQd.lean.js index 676a0042a9..e6f17a6a31 100644 --- a/assets/components_weak-hardware-overlay.md.Bj2U2oqy.lean.js +++ b/assets/components_weak-hardware-overlay.md.D7G-6lQd.lean.js @@ -1 +1 @@ -import{_ as a,c as n,j as s,a as t,t as e,W as l,o as h}from"./chunks/framework.DAQBv1cP.js";const m=JSON.parse('{"title":"WeakHardwareOverlay","description":"","frontmatter":{"title":"WeakHardwareOverlay"},"headers":[],"relativePath":"components/weak-hardware-overlay.md","filePath":"components/weak-hardware-overlay.md"}'),p={name:"components/weak-hardware-overlay.md"},k={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=l("",10);function d(i,o,c,y,g,u){return h(),n("div",null,[s("h1",k,[t(e(i.$frontmatter.title)+" ",1),E]),r])}const b=a(p,[["render",d]]);export{m as __pageData,b as default}; +import{_ as a,c as n,j as s,a as t,t as e,W as l,o as h}from"./chunks/framework.DAQBv1cP.js";const m=JSON.parse('{"title":"WeakHardwareOverlay","description":"","frontmatter":{"title":"WeakHardwareOverlay"},"headers":[],"relativePath":"components/weak-hardware-overlay.md","filePath":"components/weak-hardware-overlay.md"}'),p={name:"components/weak-hardware-overlay.md"},k={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=l("",10);function d(i,o,c,g,y,u){return h(),n("div",null,[s("h1",k,[t(e(i.$frontmatter.title)+" ",1),E]),r])}const b=a(p,[["render",d]]);export{m as __pageData,b as default}; diff --git a/assets/guide_setup.md.D-_jC7Om.js b/assets/guide_setup.md.Df9DdMLV.js similarity index 97% rename from assets/guide_setup.md.D-_jC7Om.js rename to assets/guide_setup.md.Df9DdMLV.js index efc7efb250..40003238a0 100644 --- a/assets/guide_setup.md.D-_jC7Om.js +++ b/assets/guide_setup.md.Df9DdMLV.js @@ -1,10 +1,10 @@ -import{_ as a,c as n,j as s,a as l,t,W as p,o as h}from"./chunks/framework.DAQBv1cP.js";const u=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"guide/setup.md","filePath":"guide/setup.md"}'),k={name:"guide/setup.md"},e={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=p(`

Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.

Installation ​

Install nuxt-booster as a dependency to your project:

bash
yarn add nuxt-booster
bash
npm install nuxt-booster

Add nuxt-booster to the modules section of nuxt.config.js:

@nuxt/image ​

Nuxt Booster uses the module @nuxt/image, if this is not already present, it will be integrated automatically.

It is necessary for the use of the components BoosterYoutube and BoosterVimeo to add aliases and domains to the @nuxt/image options. These are needed to retrieve the images from Youtube and Vimeo.

js
{
+import{_ as a,c as n,j as s,a as l,t,W as p,o as h}from"./chunks/framework.DAQBv1cP.js";const u=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"guide/setup.md","filePath":"guide/setup.md"}'),k={name:"guide/setup.md"},e={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=p(`
Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.
Installation ​
Install nuxt-booster as a dependency to your project:
bash
yarn add nuxt-booster
bash
npm install nuxt-booster
Add nuxt-booster to the modules section of nuxt.config.js:
@nuxt/image ​
Nuxt Booster uses the module @nuxt/image, if this is not already present, it will be integrated automatically.
It is necessary for the use of the components BoosterYoutube and BoosterVimeo to add aliases and domains to the @nuxt/image options. These are needed to retrieve the images from Youtube and Vimeo.
js
{
   domains: ['img.youtube.com', 'i.vimeocdn.com'],
   alias: {
     youtube: 'https://img.youtube.com',
     vimeo: 'https://i.vimeocdn.com',
   }
-}
More about @nuxt/image module options can be found here.
Example Configuration ​
js
{
+}
More about @nuxt/image module options can be found here.
Example Configuration ​
js
{
   modules: [
     'nuxt-booster'
   ],
@@ -92,4 +92,4 @@ import{_ as a,c as n,j as s,a as l,t,W as p,o as h}from"./chunks/framework.DAQBv
       vimeo: 'https://i.vimeocdn.com',
     }
   }
-}
See module options.
`,13);function d(i,g,o,y,c,F){return h(),n("div",null,[s("h1",e,[l(t(i.$frontmatter.title)+" ",1),E]),r])}const m=a(k,[["render",d]]);export{u as __pageData,m as default};
+}

See module options.

`,13);function d(i,g,o,y,c,F){return h(),n("div",null,[s("h1",e,[l(t(i.$frontmatter.title)+" ",1),E]),r])}const B=a(k,[["render",d]]);export{u as __pageData,B as default}; diff --git a/assets/guide_setup.md.D-_jC7Om.lean.js b/assets/guide_setup.md.Df9DdMLV.lean.js similarity index 83% rename from assets/guide_setup.md.D-_jC7Om.lean.js rename to assets/guide_setup.md.Df9DdMLV.lean.js index 09c62ebe87..b6015916bd 100644 --- a/assets/guide_setup.md.D-_jC7Om.lean.js +++ b/assets/guide_setup.md.Df9DdMLV.lean.js @@ -1 +1 @@ -import{_ as a,c as n,j as s,a as l,t,W as p,o as h}from"./chunks/framework.DAQBv1cP.js";const u=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"guide/setup.md","filePath":"guide/setup.md"}'),k={name:"guide/setup.md"},e={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=p("",13);function d(i,g,o,y,c,F){return h(),n("div",null,[s("h1",e,[l(t(i.$frontmatter.title)+" ",1),E]),r])}const m=a(k,[["render",d]]);export{u as __pageData,m as default}; +import{_ as a,c as n,j as s,a as l,t,W as p,o as h}from"./chunks/framework.DAQBv1cP.js";const u=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"guide/setup.md","filePath":"guide/setup.md"}'),k={name:"guide/setup.md"},e={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=p("",13);function d(i,g,o,y,c,F){return h(),n("div",null,[s("h1",e,[l(t(i.$frontmatter.title)+" ",1),E]),r])}const B=a(k,[["render",d]]);export{u as __pageData,B as default}; diff --git a/assets/v2_guide_caveats.md.1-C4UTCb.js b/assets/v2_guide_caveats.md.BiPPuLXK.js similarity index 99% rename from assets/v2_guide_caveats.md.1-C4UTCb.js rename to assets/v2_guide_caveats.md.BiPPuLXK.js index 72f8ee6417..1a34cbbfe8 100644 --- a/assets/v2_guide_caveats.md.1-C4UTCb.js +++ b/assets/v2_guide_caveats.md.BiPPuLXK.js @@ -17,7 +17,7 @@ import{_ as a,c as n,j as s,a as e,t,W as l,o as p}from"./chunks/framework.DAQBv }); } } -</script>

Issues ​

Browser compatibility ​

You can use nuxt-booster with Internet Explorer 11 browser.

INFO

Note that there is no optimization based on preloads in IE 11.

You need the following polyfills:

The PostCSS Plugin postcss-object-fit-images and following build.transpile entries for @nuxt/image:

For the polyfills, it is recommended to integrate them as a plugin, polyfills loading must follow a specific order.

You can see a example with live demo at Nuxt Booster Example.

Example ​

js
async function polyfills (){
+</script>

Issues ​

Browser compatibility ​

You can use nuxt-booster with Internet Explorer 11 browser.

INFO

Note that there is no optimization based on preloads in IE 11.

You need the following polyfills:

The PostCSS Plugin postcss-object-fit-images and following build.transpile entries for @nuxt/image:

For the polyfills, it is recommended to integrate them as a plugin, polyfills loading must follow a specific order.

You can see a example with live demo at Nuxt Booster Example.

Example ​

js
async function polyfills (){
 
   if (!('IntersectionObserver' in global)) {
     await import('intersection-observer');
@@ -34,7 +34,7 @@ import{_ as a,c as n,j as s,a as e,t,W as l,o as p}from"./chunks/framework.DAQBv
 
 }
 
-polyfills ();

js
{
+polyfills ();

js
{
   build: {
     
     transpile: ['@nuxt/image', 'image-meta'],
diff --git a/assets/v2_guide_caveats.md.1-C4UTCb.lean.js b/assets/v2_guide_caveats.md.BiPPuLXK.lean.js
similarity index 100%
rename from assets/v2_guide_caveats.md.1-C4UTCb.lean.js
rename to assets/v2_guide_caveats.md.BiPPuLXK.lean.js
diff --git a/assets/v2_guide_setup.md.Cnrnjoj_.js b/assets/v2_guide_setup.md.3WqNFsKQ.js
similarity index 97%
rename from assets/v2_guide_setup.md.Cnrnjoj_.js
rename to assets/v2_guide_setup.md.3WqNFsKQ.js
index 91664fe3b0..b62e5407d2 100644
--- a/assets/v2_guide_setup.md.Cnrnjoj_.js
+++ b/assets/v2_guide_setup.md.3WqNFsKQ.js
@@ -1,10 +1,10 @@
-import{_ as a,c as n,j as s,a as l,t as h,W as p,o as t}from"./chunks/framework.DAQBv1cP.js";const u=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"v2/guide/setup.md","filePath":"v2/guide/setup.md"}'),k={name:"v2/guide/setup.md"},e={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=p(`
Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.
Installation ​
Install nuxt-booster as a dependency to your project:
bash
yarn add nuxt-booster@2
bash
npm install nuxt-booster@2
Add nuxt-booster to the modules section of nuxt.config.js:
@nuxt/image ​
Nuxt Booster uses the module @nuxt/image, if this is not already present, it will be integrated automatically.
It is necessary for the use of the components BoosterYoutube and BoosterVimeo to add aliases and domains to the @nuxt/image options. These are needed to retrieve the images from Youtube and Vimeo.
js
{
+import{_ as a,c as n,j as s,a as l,t as h,W as p,o as t}from"./chunks/framework.DAQBv1cP.js";const u=JSON.parse('{"title":"Setup","description":"","frontmatter":{"title":"Setup"},"headers":[],"relativePath":"v2/guide/setup.md","filePath":"v2/guide/setup.md"}'),k={name:"v2/guide/setup.md"},e={id:"frontmatter-title",tabindex:"-1"},E=s("a",{class:"header-anchor",href:"#frontmatter-title","aria-label":'Permalink to "{{$frontmatter.title}}"'},"​",-1),r=p(`
Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.
Installation ​
Install nuxt-booster as a dependency to your project:
bash
yarn add nuxt-booster@2
bash
npm install nuxt-booster@2
Add nuxt-booster to the modules section of nuxt.config.js:
@nuxt/image ​
Nuxt Booster uses the module @nuxt/image, if this is not already present, it will be integrated automatically.
It is necessary for the use of the components BoosterYoutube and BoosterVimeo to add aliases and domains to the @nuxt/image options. These are needed to retrieve the images from Youtube and Vimeo.
js
{
   domains: ['img.youtube.com', 'i.vimeocdn.com'],
   alias: {
     youtube: 'https://img.youtube.com',
     vimeo: 'https://i.vimeocdn.com',
   }
-}
More about @nuxt/image module options can be found here.
Example Configuration ​
js
{
+}
More about @nuxt/image module options can be found here.
Example Configuration ​
js
{
   modules: [
     'nuxt-booster'
   ],
diff --git a/assets/v2_guide_setup.md.Cnrnjoj_.lean.js b/assets/v2_guide_setup.md.3WqNFsKQ.lean.js
similarity index 100%
rename from assets/v2_guide_setup.md.Cnrnjoj_.lean.js
rename to assets/v2_guide_setup.md.3WqNFsKQ.lean.js
diff --git a/components/booster-iframe.html b/components/booster-iframe.html
index 2f911f81d7..261d153a52 100644
--- a/components/booster-iframe.html
+++ b/components/booster-iframe.html
@@ -37,7 +37,7 @@
   @load="console.log('Iframe Loaded!')" 
   @enter="console.log('Iframe enter viewport!')" 
 />
NameDescription
loadTriggered when Iframe has finished loading.
enterTriggered when component has reached the viewport.
- + \ No newline at end of file diff --git a/components/booster-image.html b/components/booster-image.html index a3099cd03e..9a9a68be39 100644 --- a/components/booster-image.html +++ b/components/booster-image.html @@ -82,7 +82,7 @@ }

Learn more about modifiers:

preset ​

If a preset is set on a source, the globally defined one is ignored.

This means that a separate preset can be specified for each source.

Learn more about preset:

provider ​

If a provider is set on a source, the globally defined one is ignored.

This means that a separate provider can be specified for each source.

Learn more about provider:

densities ​

If a densities is set on a source, the globally defined one is ignored.

Learn more about densities:

alt ​

Image alternative Text.

MDN - HTMLImageElement.alt

title ​

Image Title.

MDN - HTMLElement.title

crossorigin ​

If not set, the global crossorigin is used this.$booster.crossorigin.

Learn more about crossorigin option

MDN - HTML.Attributes.crossorigin

critical ​

Set component as critical component.

Learn more about critical components

Events ​

html
<booster-image 
   @load="console.log('Image Loaded!')" 
 />
NameDescription
loadTriggered when the image resource has been completely loaded.
- + \ No newline at end of file diff --git a/components/booster-layer.html b/components/booster-layer.html index 60c65dcde2..9724390cf3 100644 --- a/components/booster-layer.html +++ b/components/booster-layer.html @@ -74,7 +74,7 @@ </button> </div> </booster-layer>

Force App initialization ​

Set the global variable __NUXT_BOOSTER_AUTO_INIT__ to true to force the initialization of the app.

VariableTypeDescriptionDefault
__NUXT_BOOSTER_AUTO_INIT__BooleanIf set, initialisation continues after the javascript has been fully loaded.false
- + \ No newline at end of file diff --git a/components/booster-picture.html b/components/booster-picture.html index 68fd0a516e..faab5ec8c9 100644 --- a/components/booster-picture.html +++ b/components/booster-picture.html @@ -66,7 +66,7 @@ ]

formats ​

Overrides the pictureFormats property defined in the module options.

Defines the formats that are to be generated and provided as source in the Picture.
Is used to offer the correct image type for the browser.

WARNING

Formats can also be specified as OR condition (jpg|jpeg|png|gif). This is important when using JPGs and PNGs with the same format configuration.

alt ​

Image alternative Text.

MDN - HTMLImageElement.alt

title ​

Image Title.

MDN - HTMLElement.title

crossorigin ​

If not set, the global crossorigin is used this.$booster.crossorigin.

Learn more about crossorigin option

MDN - HTML.Attributes.crossorigin

sortSources ​

If set, the sources are sorted by the media properties.

This is made possible by sort-css-media-queries.

critical ​

Set component as critical component.

Learn more about critical components

Events ​

html
<booster-picture 
   @load="console.log('Loaded!')" 
 />
NameDescription
loadTriggered when the image resource has been completely loaded.
- + \ No newline at end of file diff --git a/components/booster-vimeo.html b/components/booster-vimeo.html index 2422d4aa83..a4de1107ee 100644 --- a/components/booster-vimeo.html +++ b/components/booster-vimeo.html @@ -84,7 +84,7 @@ @ready="console.log('Player Ready!')" @playing="console.log('Player Playing!')" />
NameDescription
readyTriggered when Vimeo Player-SDK is completely loaded.
playingTriggered when video is finished loading and playing.
beforePlayerUsed to place elements in the player container (before).
afterPlayerUsed to place elements in the player container (after).
- + \ No newline at end of file diff --git a/components/booster-youtube.html b/components/booster-youtube.html index 49cffddd87..2e04854938 100644 --- a/components/booster-youtube.html +++ b/components/booster-youtube.html @@ -76,7 +76,7 @@ @ready="console.log('Player Ready!')" @playing="console.log('Player Playing!')" />
NameDescription
readyTriggered when Youtube-API is completely loaded.
playingTriggered when video is finished loading and playing.
beforePlayerUsed to place elements in the player container (before).
afterPlayerUsed to place elements in the player container (after).
- + \ No newline at end of file diff --git a/components/weak-hardware-overlay.html b/components/weak-hardware-overlay.html index f3374b1921..cdfbfdb257 100644 --- a/components/weak-hardware-overlay.html +++ b/components/weak-hardware-overlay.html @@ -12,12 +12,12 @@ - + -

Appearance

WeakHardwareOverlay ​

The WeakHardwareOverlay is used in components that are affected by the BoosterLayer event Weak Hardware. (Example: Component requires the execution of mounted for functionality.)

INFO

The performance issue event occurs when initialization determines that the client is overloaded with execution and the user has confirmed the .nuxt-booster-button-init-reduced-view button in the BoosterLayer.

Learn more about BoosterLayer interactions)

Basically, the overlay is used to make content visible when the Weak Hardware has occurred, if this does not occur, the overlay is not visible.

It is recommended to include an interaction element in the overlay that allows the user to switch to the normal state. For this the interaction element must get the Style Class .nuxt-booster-button-init-app and reacts on click with the initialization of the app.

Example ​

Example of defining a custom WeakHardwareOverlay component and placing it in a target component that is affected by the Weak Hardware event.

Customize Overlay ​

vue
<template>
+    
Appearance
WeakHardwareOverlay ​
The WeakHardwareOverlay is used in components that are affected by the BoosterLayer event Weak Hardware. (Example: Component requires the execution of mounted for functionality.)
INFO
The performance issue event occurs when initialization determines that the client is overloaded with execution and the user has confirmed the .nuxt-booster-button-init-reduced-view button in the BoosterLayer.
Learn more about BoosterLayer interactions)
Basically, the overlay is used to make content visible when the Weak Hardware has occurred, if this does not occur, the overlay is not visible.
It is recommended to include an interaction element in the overlay that allows the user to switch to the normal state. For this the interaction element must get the Style Class .nuxt-booster-button-init-app and reacts on click with the initialization of the app.
Example ​
Example of defining a custom WeakHardwareOverlay component and placing it in a target component that is affected by the Weak Hardware event.
Customize Overlay ​
vue
<template>
   <booster-weak-hardware-overlay>
     To improve your experience, extensive features have been disabled.<br>
     <button class="nuxt-booster-button-init-app">
@@ -41,7 +41,7 @@
   background: rgb(0 0 0 / 60%);
   backdrop-filter: blur(em(2px));
 }
-</style>
Usage Overlay ​
vue
<template>
+</style>
Usage Overlay ​
vue
<template>
   <div>
     <div ref="player" />
     <weak-hardware-overlay />
@@ -67,7 +67,7 @@
   backdrop-filter: blur(2px);
 }
 </style>

-    
+    
     
   
 
\ No newline at end of file
diff --git a/composables/useBoosterComponentObserver.html b/composables/useBoosterComponentObserver.html
index 5989fdc5e2..8c94652287 100644
--- a/composables/useBoosterComponentObserver.html
+++ b/composables/useBoosterComponentObserver.html
@@ -29,7 +29,7 @@
   delay: 350
 });
 </script>
- + \ No newline at end of file diff --git a/composables/useBoosterConfig.html b/composables/useBoosterConfig.html index 124c4671f1..0b4f0aea8b 100644 --- a/composables/useBoosterConfig.html +++ b/composables/useBoosterConfig.html @@ -18,7 +18,7 @@

Appearance

useBoosterConfig ​

Return ​

Returns nuxt-booster public runtime options.

Example ​

js
const $boosterOptions = useBoosterConfig();
- + \ No newline at end of file diff --git a/composables/useBoosterCritical.html b/composables/useBoosterCritical.html index c8abb19a69..3930c1e9ef 100644 --- a/composables/useBoosterCritical.html +++ b/composables/useBoosterCritical.html @@ -24,7 +24,7 @@ <script setup> const { isCritical } = useBoosterCritical(); </script> - + \ No newline at end of file diff --git a/composables/useBoosterFont.html b/composables/useBoosterFont.html index d80a745086..27ba218ba9 100644 --- a/composables/useBoosterFont.html +++ b/composables/useBoosterFont.html @@ -24,7 +24,7 @@ <script setup> const { $getFont } = useBoosterFonts(); </script> - + \ No newline at end of file diff --git a/composables/useBoosterHead.html b/composables/useBoosterHead.html index ae3ee5cc29..d16b181ee8 100644 --- a/composables/useBoosterHead.html +++ b/composables/useBoosterHead.html @@ -18,7 +18,7 @@

Appearance

⚠️ useBoosterHead ​

WARNING

useBoosterhead is an internally used composable that is called once in the plugin.

Is required to create and manage a head entry.

- + \ No newline at end of file diff --git a/composables/useBoosterHydrate.html b/composables/useBoosterHydrate.html index dd0db647d2..9efaae0031 100644 --- a/composables/useBoosterHydrate.html +++ b/composables/useBoosterHydrate.html @@ -20,7 +20,7 @@

Appearance

useBoosterHydrate ​

Compasable provides a function for wrapping components in order to control hydration.

Learn more about component import.

Return ​

Returns import wrapper function.

Example ​

js
const hydrate = useBoosterHydrate();
 
 const component = hydrate(() => import('~/components/MyComponent.vue'));
- + \ No newline at end of file diff --git a/concept.html b/concept.html index 373f78a2c8..2b97477313 100644 --- a/concept.html +++ b/concept.html @@ -18,7 +18,7 @@

Appearance

Concept ​

Current Situation ​

The loading behavior of webpages based on NuxtJS is designed in such a way that all necessary Javascript resources are preloaded and directly initialized with the initial load of the page. However, this behavior creates a negative impact on the Lighthouse Performance Score (TTI) for larger pages that have an increased initial load of additional resources, such as fonts, images, plugins, modules (@nuxtjs/i18n, ...).

Excursus ​

The Lighthouse Test is not a tool to make a general statement about the quality of a website programming. Lighthouse rather tries to map a metric for the usability of a page from the user's point of view. This includes accessibility, best practices, SEO and of course performance.

This last point is often misinterpreted by developers. If you want to implement features that increase usability for the user (interactions/more complex animations, ...), this will always have an impact on performance in the Lighthouse Test for larger website projects, as the corresponding Javascript must be loaded for this. Finally, Lighthouse does also not rate the design, but the accessibility (size of click areas, etc.) of a website. You should therefore not ask yourself the following question: "How can I fully optimize my JavaScript to achieve a Lighthouse score of 100/100?". You have to ask yourself much more the question: "What is especially important to a user with low bandwidth or weak hardware on my site?".

The answer to this is relatively simple: the content must be accessible and you must be able to get to the information you need quickly.

No more and no less.

The user doesn't need any fancy slider animations and parallax effects that can only be implemented with certain libraries. Or a softload mechanism to get to more pages in a more elegant and animated way, but which initially needs an increased amount of javascript logic. All he wants is that information is retrievable reasonably fast and he can click through the presence.

Problem ​

The good news is that the NuxtJS SSR build provides the right foundation. The content is already in the form of HTML and CSS and can be used without Javascript. But what is missing

  • is a fully automated preload logic that allows component and viewport based handling and prioritization of the individual resources (FCP, LCP, CLS)
  • is a logic that enables a perfomance-oriented initialization of the javascript (TTI, TBT)

These two central points are handled by Nuxt Booster and enable a fast and resource-saving loading behavior of the website.

Approach ​

Over a longer period of time, we analyzed the Google Lighthouse test in more detail and approached the topic with the help of use cases. We did not start with the best case for page content (one image, one font, minimal javascript), but with the worst case (many images, many fonts, large Javascript files, ...). So we avoided to develop only a solution for simple SinglePages. Our claim was much more to create a generalistic, performant solution even with a CMS connection and dynamic component compositions per page. All our thoughts are based on HTTP/2 request prioritization and the lazy hydration approach. Initial resources are prioritized by preload and all further data is reloaded viewport-based.

Insights & Solutions ​

During the tests, we gained the following insights, which we would like to share with you, but which also allow us to draw conclusions regarding the performance optimization of the initial loading process and which have been incorporated into the Nuxt Booster solution.

Critical Render Path ​

The critical render path is the core of a high-performance and efficient loading and rendering behavior of a website. It is important that components and resources in the viewport are loaded and executed with priority so that the user can be provided with a functioning page as quickly as possible. A browser is not able to recognize this fully automatically to dynamically adapt the loading behavior. Some attempts have been made in the past to systematically identify the critical render path.However, this has the consequence that every generated page in a virtual browser has to be analyzed in given viewport sizes, which slows down the deployment process and makes it more error-prone. For this reason, we (the developers) will be forced to provide the build process with appropriate hints in the form of a Critical Attribute on the affected component, so that an automated optimization by preloads, lazy hydration, etc. can be performed in response.

Font Loading ​

Fonts are the great mystery on the Internet. For more complex designs it is not uncommon that more than 6 font files have to be loaded. It would be desirable if there were many more variable fonts, but the reality is usually different. Often, developers are forced to register tons of fonts with different font styles. So it can happen that the website needs a total count of 12 font files, which have to be loaded initially to achieve the right visual result on the whole page.

This is a real performance problem. If you look for solutions, you like to hear

  • don't use WebFonts that have to be loaded
  • use another optimized font
  • reduce the number of used fonts
  • embed the fonts via Base64

You will find some articles about font loading. But most of them are more than 3 years old. Summary: not much happened here. A nice and recommendable list of different strategies can be found at web-font-loading-recipes or comprehensive-webfonts. From this it can be deduced that there is still no universal solution to the problem. However, it is possible to approach the issue very efficiently by using a preload strategy and setting classes accordingly. However, this does not make the handling of the fonts any easier. On the one hand, the preloads have to be defined per page and on the other hand, the CSS in the respective component has to be activated with the corresponding font declaration per class on demand. This is manageable for smaller projects in a 1 person team. But if several people are working in parallel, it can quickly become a nightmare. This will inevitably lead to the fact that the approach will not be accepted by the team and the optimization will be optimized out of the project in the long run.

INFO

A few words about Google Fonts: If possible, the FontFaces should always be included directly as Woff/Woff2 files via inline style. The loading mechanism via external CSS file, as it is the case with Google Fonts, creates an additional network roundtrip, which delays the loading of the actual font files.

The strategy mentioned above makes sense, but is hardly implementable with the current tools. For this reason, we are introducing Directive v-font, which takes care of the outlined behavior in a fully automated way and thus represents a truly relevant solution even on larger projects. Combined with the lazy hydration approach, the relevant fonts can be declared and loaded per component. The preloads are controlled via the critical attribute. With the help of this loading strategy, a FOUT (flash of unstyled text) and CLS can be massively reduced or eliminated. If no javascript is activated on the end device, all fonts are automatically activated via CSS.

Image Loading ​

For image compression and different image formats, the module nuxt-optimized-images was popularly used in the nuxt world in the past. The downside, however, is that this approach is not particularly CMS and deployment friendly. With each image change, a full build process had to be initiated. For this reason, we use the nuxt-image module, as this takes advantage of a change in NuxtJS as of version 2.13.0. In this version update, the build was split into two separate processes (javascript compilation + page generation). With nuxt-optimized-images the full build process had to be run for every image change. This is no longer the case with nuxt-image. Here only the page generation process is necessary. As a result, deployment times for all content changes can be massively reduced.

We use the module in its complete form. However, we have redeveloped the nuxt-image and nuxt-picture components, as the current version does not fully meet our requirements. For example, we lacked an appropriate preloading and lazy hydration strategy. Although there is a native loading attribute on the image element that allows prioritization, the use for websites with a lot of images is still not optimal, because the distance-from-viewport threshold is still too generous and the loading performance can deteriorate unintentionally. For this we have implemented a corresponding SEO-compliant alternative, which loads the images only when the viewport is reached, but also provides the image sources for search engines via no-script tag. This way all relevant images can be displayed even if Javascript is disabled. Furthermore you can also define multiple image sources in the picture, so it is possible to display an image in portait mode with a 9/16 aspect-ratio (multiple renditions) and in landscape mode with a 16/9 aspect-ratio (multiple renditions).

Javascript Loading ​

NuxtJS follows the approach to load the core files (page, app, payload, vendor, state, etc.) as fast and efficient as possible via (module-)preload from the client. This also makes total sense if you want to deliver an SPA. For the SSR build, however, we modified the delivery a bit. The many parallel downloads (fonts, images, js, ...) have a negative impact from a performance perspective. This effect increases when the javascript files grow in size due to modules and plugins. It would make sense if the initial package is kept small and only the absolutely necessary resources that can trigger the further initialization process are transferred via dynamic import. This leaves enough bandwidth to load the remaining resources (fonts, images).

This loading behavior only makes sense with an SSR build, since the full page-related static content can already be delivered and rendered with the HTML and the included CSS. This means that the user does not notice any time lags and the page is still usable. Another advantage: If the bandwidth is low, a basic functionality of the page (links, ...) can be ensured thanks to the SSR build.

RequestIdleCallback ​

The TimeRemaining function of the IdleDeadline object continuously returns a value <= 10 in the Lighthouse Test (simulated Motorola G4). This can be seen as an indicator for weak hardware on the end device and allows the following conclusion. If there are not enough hardware resources available to execute the JavaScript quickly, this process is suppressed. Who needs optional functionality that takes a long time to initialize and possibly leads to a temporary freeze in the browser.

We use this effect by executing the intial javascript process and the component initialization in the RequestIdleCallback, if we get a time slot >10ms from the device. Hereby we achieve a massive reduction of the TTI/TBT in the Lighthouse Test and on weak hardware, because the javascript execution is simply paused in the worst case until sufficient resources are available. This also prevents blocking of the MainThread.

Side effect: The timeslots in the Google Lighthouse Test are always <= 10ms, so no javascript will be initialized.

BoosterLayer ​

With the solutions described above, the user gets a functioning webpage displayed very quickly. However, the following situation can also occur on the end device:

  • no Javascript enabled
  • reduced bandwidth
  • weak hardware
  • unsupported browser

The reduced bandwidth or weak hardware should get a focus especially when larger amounts of data have to be transferred and executed, e.g. a ThreeJS component with more complex 3D objects. In this case, we should inform the user that the experience will be negatively affected and that there may be waiting times.

For this purpose, we provide an InfoLayer that is displayed when a minimum FCP time is exceeded, when the number of available CPU cores falls below a minimum level, when javascript is disabled or the users opens the page by an unsupported browser. The user can decide in this dialog box whether he wants to load the remaining resources despite the restrictions. If the user declines this dialog, only the fonts and images for the page will be loaded and no further javascript will be loaded or executed.

Conclusion ​

The findings and solutions described above have been incorporated and systematized in the Nuxt Booster module. Only in combination can they unfold their full functionality and ensure an overall optimization of the loading behavior. Overall we have reduced the following timing metrics ...

  • FCP
  • LCP
  • TTI
  • TBT

With this module we enable every developer in the NuxtJS context to achieve a Lighthouse Performance Score 100/100 and drastically reduce the development time for website performance optimization.

- + \ No newline at end of file diff --git a/directives/v-font.html b/directives/v-font.html index 5fdc8b90ed..244b99d856 100644 --- a/directives/v-font.html +++ b/directives/v-font.html @@ -46,7 +46,7 @@ $getFont('Font Family B', 700, 'normal', { selector: 'b, strong', media: '(min-width: 768px)' }) ] - + \ No newline at end of file diff --git a/guide/caveats.html b/guide/caveats.html index 455f730784..ce717af214 100644 --- a/guide/caveats.html +++ b/guide/caveats.html @@ -40,7 +40,7 @@ }) </script> - + \ No newline at end of file diff --git a/guide/options.html b/guide/options.html index 5957f0b2d5..efa184435d 100644 --- a/guide/options.html +++ b/guide/options.html @@ -81,7 +81,7 @@ stdTTL: 3600, checkperiod: 1800 }

disableNuxtFontaine ​

If set, @nuxtjs/fontaine will not be integrated.

INFO

For more information: https://github.com/nuxt-modules/fontaine

disableNuxtImage ​

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

DANGER

Note that the use of BoosterImage, BoosterPicture, BoosterVimeo and BoosterYoutube is not supported if @nuxt/image is not integrated.

- + \ No newline at end of file diff --git a/guide/setup.html b/guide/setup.html index e057aa5c2a..336e97ad88 100644 --- a/guide/setup.html +++ b/guide/setup.html @@ -12,18 +12,18 @@ - + -

Appearance

Setup ​

Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.

Installation ​

Install nuxt-booster as a dependency to your project:

bash
yarn add nuxt-booster
bash
npm install nuxt-booster

Add nuxt-booster to the modules section of nuxt.config.js:

@nuxt/image ​

Nuxt Booster uses the module @nuxt/image, if this is not already present, it will be integrated automatically.

It is necessary for the use of the components BoosterYoutube and BoosterVimeo to add aliases and domains to the @nuxt/image options. These are needed to retrieve the images from Youtube and Vimeo.

js
{
+    
Appearance
Setup ​
Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.
Installation ​
Install nuxt-booster as a dependency to your project:
bash
yarn add nuxt-booster
bash
npm install nuxt-booster
Add nuxt-booster to the modules section of nuxt.config.js:
@nuxt/image ​
Nuxt Booster uses the module @nuxt/image, if this is not already present, it will be integrated automatically.
It is necessary for the use of the components BoosterYoutube and BoosterVimeo to add aliases and domains to the @nuxt/image options. These are needed to retrieve the images from Youtube and Vimeo.
js
{
   domains: ['img.youtube.com', 'i.vimeocdn.com'],
   alias: {
     youtube: 'https://img.youtube.com',
     vimeo: 'https://i.vimeocdn.com',
   }
-}
More about @nuxt/image module options can be found here.
Example Configuration ​
js
{
+}
More about @nuxt/image module options can be found here.
Example Configuration ​
js
{
   modules: [
     'nuxt-booster'
   ],
@@ -112,7 +112,7 @@
     }
   }
 }
See module options.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/guide/usage.html b/guide/usage.html
index eeec9aadd6..b1b449b2fb 100644
--- a/guide/usage.html
+++ b/guide/usage.html
@@ -35,7 +35,7 @@
   }
 }
 </script>

INFO

The booster components will be expanded in the future. If you have explicit wishes, please send us a feature request or directly a pull request with the corresponding feature 😃

- + \ No newline at end of file diff --git a/hashmap.json b/hashmap.json index 48504eb816..c8da2b16cf 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"components_booster-iframe.md":"DFwaSihJ","components_booster-image.md":"eHdlCu_p","components_booster-layer.md":"Yle3hhqF","components_booster-picture.md":"DmC8uSMN","components_booster-vimeo.md":"Ue3B9fLo","components_booster-youtube.md":"DkQPF3SW","components_weak-hardware-overlay.md":"Bj2U2oqy","composables_useboostercomponentobserver.md":"BLIzAG48","composables_useboosterconfig.md":"Dacn70_D","composables_useboostercritical.md":"B79rV-AW","composables_useboosterfont.md":"JRFpQaGf","composables_useboosterhead.md":"WAB54y0X","composables_useboosterhydrate.md":"D6DVht4Y","concept.md":"Bmkh377u","directives_v-font.md":"ObgQ0QAP","guide_caveats.md":"BgLWRWcz","guide_options.md":"Buf_mmlA","guide_setup.md":"D-_jC7Om","guide_usage.md":"BckVHnX0","index.md":"DKa0GB-d","migration_v2-0-13.md":"CdaXGw72","migration_v2-2-0.md":"e3vTld9e","migration_v2.md":"CPOKVoC_","migration_v3.1.0.md":"26tQfl_L","migration_v3.md":"-VmmttyZ","v2_classes_loading-spinner.md":"B13-NEhF","v2_components_booster-iframe.md":"D7oQfSNn","v2_components_booster-image.md":"D4-rzm9o","v2_components_booster-layer.md":"CptIHBii","v2_components_booster-picture.md":"xmdYYRUu","v2_components_booster-vimeo.md":"DbTsQJK2","v2_components_booster-youtube.md":"Dc3b6blO","v2_concept.md":"C5ttit-j","v2_directives_v-font.md":"B3kJTEli","v2_guide_caveats.md":"1-C4UTCb","v2_guide_options.md":"CcZG5RM8","v2_guide_setup.md":"Cnrnjoj_","v2_guide_usage.md":"jpI_MMHd","v2_index.md":"C6lmYdlc"} +{"components_booster-iframe.md":"DFwaSihJ","components_booster-image.md":"eHdlCu_p","components_booster-layer.md":"Yle3hhqF","components_booster-picture.md":"DmC8uSMN","components_booster-vimeo.md":"Ue3B9fLo","components_booster-youtube.md":"DkQPF3SW","components_weak-hardware-overlay.md":"D7G-6lQd","composables_useboostercomponentobserver.md":"BLIzAG48","composables_useboosterconfig.md":"Dacn70_D","composables_useboostercritical.md":"B79rV-AW","composables_useboosterfont.md":"JRFpQaGf","composables_useboosterhead.md":"WAB54y0X","composables_useboosterhydrate.md":"D6DVht4Y","concept.md":"Bmkh377u","directives_v-font.md":"ObgQ0QAP","guide_caveats.md":"BgLWRWcz","guide_options.md":"Buf_mmlA","guide_setup.md":"Df9DdMLV","guide_usage.md":"BckVHnX0","index.md":"DKa0GB-d","migration_v2-0-13.md":"CdaXGw72","migration_v2-2-0.md":"e3vTld9e","migration_v2.md":"CPOKVoC_","migration_v3.1.0.md":"26tQfl_L","migration_v3.md":"-VmmttyZ","v2_classes_loading-spinner.md":"B13-NEhF","v2_components_booster-iframe.md":"D7oQfSNn","v2_components_booster-image.md":"D4-rzm9o","v2_components_booster-layer.md":"CptIHBii","v2_components_booster-picture.md":"xmdYYRUu","v2_components_booster-vimeo.md":"DbTsQJK2","v2_components_booster-youtube.md":"Dc3b6blO","v2_concept.md":"C5ttit-j","v2_directives_v-font.md":"B3kJTEli","v2_guide_caveats.md":"BiPPuLXK","v2_guide_options.md":"CcZG5RM8","v2_guide_setup.md":"3WqNFsKQ","v2_guide_usage.md":"jpI_MMHd","v2_index.md":"C6lmYdlc"} diff --git a/index.html b/index.html index d7b3bd62f7..4dc8a74fc9 100644 --- a/index.html +++ b/index.html @@ -19,7 +19,7 @@

Appearance

nuxt boosternuxt booster

Module for NuxtJS.

You are reading the documentation for Nuxt Booster (v3)!

Nuxt Booster takes over the lighthouse performance optimization of your generated website.

In order to achieve a performance score of 100/100, only the necessary resources located in the current viewport may be initialized when the page is loaded. This includes images, fonts and the js-modules. Until now, there has been no practical and usable concept to help developers maintain an overview and enable accurate targeting in NuxtJS projects.

This module addresses this problem and provides a holistic approach to intelligently load the necessary viewport related resources to reduce FCP, DCL, TTI, TBT and CLS.

We didn't reinvent the whole wheel. We adapt the lazy hydration concept of Markus Oberlehner to load js components in an efficient way, use the nuxt/image module as a base to retrieve optimized image resolutions for our picture and image components and add some new stuff to obtain a holistic solution.

Requirements ​

  • NodeJS >= 19
  • NuxtJS >= 3.5.0

Features ​

We provide the following CMS-friendly features:

  • dynamic loading of viewport based page resources like fonts, components, pictures, images and iframes
  • optional blocking of javascript execution by initial performance measuring
  • optimized initial load of javascript files by eliminating of unnecessary javascript files
  • prevents the loading of unnecessary resources (including components) that are outside the current viewport.
  • optional info layer concept to inform users about a reduced UX when bandwidth or hardware is compromised.
  • completely new approach of font declaration
  • optimized picture component (supports viewport based sources e.g. landscape/portrait)
  • optimized image component
  • supports SEO-friendly lazy hydration mode (picture + image)
  • optimized youtube/vimeo component (auto generated poster image in different resolutions)

Results ​

  • delivery of the minimum required resources based on the current viewport
  • if you use the tools as specified you will get a lighthouse performance score of 100/100

Demos ​

- + \ No newline at end of file diff --git a/migration/v2-0-13.html b/migration/v2-0-13.html index 2f7dfb41f3..839e42e395 100644 --- a/migration/v2-0-13.html +++ b/migration/v2-0-13.html @@ -26,7 +26,7 @@ </li>

replaced with

html
<li id="nuxt-booster-message-reduced-bandwidth">
   reduced-bandwidth
 </li>

Button Interactions ​

Button #nuxt-booster-button-init-font has been replaced by #nuxt-booster-button-init-reduced-view.

#nuxt-booster-button-init-reduced-view does the following when clicked:

  1. Sets the CSS class nuxt-booster-reduced-view on the html tag.
  2. Activates all fonts by setting the class font-active on all elements with the attribute data-font.
  3. Converts all not activated pictures (:hydrate="false") from noscript to picture.

INFO

The CSS class nuxt-booster-reduced-view is removed again at app initialization.

- + \ No newline at end of file diff --git a/migration/v2-2-0.html b/migration/v2-2-0.html index 8a301bb354..bd3ea11914 100644 --- a/migration/v2-2-0.html +++ b/migration/v2-2-0.html @@ -18,7 +18,7 @@

Appearance

Migrate from v2.0.13 to v2.2.0 ​

With the change to version 2.2.0 there are the following changes:

Package Structure ​

Package structure was updated.

Everything in the folder runtime is available with the alias #booster.

General ​

Old PathNew Path
nuxt-booster/hydrate#booster/hyrdate

Components ​

Old PathNew Path
nuxt-booster/components/abstracts/ComponentObserver#booster/components/abstracts/ComponentObserver
nuxt-booster/components/abstracts/OnlySsr#booster/components/abstracts/OnlySsr
nuxt-booster/components/GoogleLighthouse#booster/components/GoogleLighthouse
nuxt-booster/components/BoosterImage#booster/components/BoosterImage
nuxt-booster/components/BoosterPicture#booster/components/BoosterPicture
nuxt-booster/components/BoosterVimeo#booster/components/BoosterVimeo
nuxt-booster/components/BoosterYoutube#booster/components/BoosterYoutube
nuxt-booster/components/BoosterIframe#booster/components/BoosterIframe
nuxt-booster/components/BoosterImage#booster/components/BoosterImage
nuxt-booster/components/BoosterLayer#booster/components/BoosterLayer
nuxt-booster/components/BoosterPicture#booster/components/BoosterPicture
nuxt-booster/components/BoosterVimeo#booster/components/BoosterVimeo
nuxt-booster/components/BoosterYoutube#booster/components/BoosterYoutube

Utils ​

Old PathNew Path
nuxt-booster/utils#booster/utils
nuxt-booster/utils/base64#booster/utils/base64
nuxt-booster/utils/browser#booster/utils/browser
nuxt-booster/utils/description#booster/utils/description
nuxt-booster/utils/lighthouse#booster/utils/lighthouse
nuxt-booster/utils/mimeType#booster/utils/mimeType
nuxt-booster/utils/performance#booster/utils/performance
nuxt-booster/utils/placeholder#booster/utils/placeholder
nuxt-booster/utils/string#booster/utils/string
nuxt-booster/utils/support#booster/utils/support
- + \ No newline at end of file diff --git a/migration/v2.html b/migration/v2.html index d9d1433190..f3be8d16f3 100644 --- a/migration/v2.html +++ b/migration/v2.html @@ -35,7 +35,7 @@ { src: '/img/landscape.png', sizes: { md: '100vw' }, media: '(orientation: landscape)' }, { src: '/img/portrait.png', sizes: { default: '100vw', sm: '100vw' }, media: '(orientation: portrait)' } ]

More information about the integration of BoosterPicture can be found here.

WARNING

Important: In the new version of BoosterPicture the placeholder property is no longer included.

BoosterYoutube / BoosterYoutubeExperimental ​

With the change of the BoosterPicture also BoosterYoutube and BoosterYoutubeExperimental were reduced to BoosterYoutube.

The events loading and enter have been removed.

More information about the integration of BoosterYoutube can be found here.

BoosterIframe ​

Property intersectionObserver was renamed to componentObserver.

More information about the integration of BoosterIframe can be found here.

- + \ No newline at end of file diff --git a/migration/v3.1.0.html b/migration/v3.1.0.html index c2ad64e79d..56d574d3a3 100644 --- a/migration/v3.1.0.html +++ b/migration/v3.1.0.html @@ -54,7 +54,7 @@ ]" /> </template> - + \ No newline at end of file diff --git a/migration/v3.html b/migration/v3.html index 968fdba55f..acb9ae872d 100644 --- a/migration/v3.html +++ b/migration/v3.html @@ -28,7 +28,7 @@ </script>

for the use of critical components.

html
<template>
   <component critical></component>
 </template>
- + \ No newline at end of file diff --git a/playground/.nojekyll b/playground/.nojekyll deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/playground/200.html b/playground/200.html index 2ac539b8fd..6afbf05233 100644 --- a/playground/200.html +++ b/playground/200.html @@ -5,4 +5,4 @@
- \ No newline at end of file + \ No newline at end of file diff --git a/playground/404.html b/playground/404.html index 2ac539b8fd..6afbf05233 100644 --- a/playground/404.html +++ b/playground/404.html @@ -5,4 +5,4 @@
- \ No newline at end of file + \ No newline at end of file diff --git a/playground/_nuxt/builds/latest.json b/playground/_nuxt/builds/latest.json index 2b41846143..4e3a18ad30 100644 --- a/playground/_nuxt/builds/latest.json +++ b/playground/_nuxt/builds/latest.json @@ -1 +1 @@ -{"id":"2cfea99b-18a9-4182-abe4-658e28675526","timestamp":1725282700097} \ No newline at end of file +{"id":"4cfa3d4c-e40e-4627-b9f1-45d2dd9eeb85","timestamp":1725353784416} \ No newline at end of file diff --git a/playground/_nuxt/builds/meta/2cfea99b-18a9-4182-abe4-658e28675526.json b/playground/_nuxt/builds/meta/2cfea99b-18a9-4182-abe4-658e28675526.json deleted file mode 100644 index a98f308d0e..0000000000 --- a/playground/_nuxt/builds/meta/2cfea99b-18a9-4182-abe4-658e28675526.json +++ /dev/null @@ -1 +0,0 @@ -{"id":"2cfea99b-18a9-4182-abe4-658e28675526","timestamp":1725282700097,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":["/","/tests","/tests/booster-layer","/tests/youtube","/tests/picture","/tests/vimeo","/tests/image","/tests/v-font","/tests/iframe","/tests/v-font-media","/tests/booster-loader","/tests/useBoosterHead","/tests/useBoosterHead/2","/tests/useBoosterHead/1","/tests/v-font-scroll","/tests/useBoosterHead/empty-1","/tests/useBoosterHead/empty-2","/tests/weak-hardware-overlay"]} \ No newline at end of file diff --git a/playground/_nuxt/builds/meta/4cfa3d4c-e40e-4627-b9f1-45d2dd9eeb85.json b/playground/_nuxt/builds/meta/4cfa3d4c-e40e-4627-b9f1-45d2dd9eeb85.json new file mode 100644 index 0000000000..1b7eb933a2 --- /dev/null +++ b/playground/_nuxt/builds/meta/4cfa3d4c-e40e-4627-b9f1-45d2dd9eeb85.json @@ -0,0 +1 @@ +{"id":"4cfa3d4c-e40e-4627-b9f1-45d2dd9eeb85","timestamp":1725353784416,"matcher":{"static":{},"wildcard":{},"dynamic":{}},"prerendered":["/","/tests","/tests/booster-layer","/tests/youtube","/tests/picture","/tests/vimeo","/tests/image","/tests/iframe","/tests/v-font","/tests/booster-loader","/tests/v-font-media","/tests/useBoosterHead","/tests/useBoosterHead/1","/tests/useBoosterHead/2","/tests/v-font-scroll","/tests/useBoosterHead/empty-1","/tests/useBoosterHead/empty-2","/tests/weak-hardware-overlay"]} \ No newline at end of file diff --git a/playground/_payload.json b/playground/_payload.json index 2852b76581..48b4e46ef5 100644 --- a/playground/_payload.json +++ b/playground/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282709398] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353793903] \ No newline at end of file diff --git a/playground/index.html b/playground/index.html index 38b12b19e6..e944ac5ddc 100644 --- a/playground/index.html +++ b/playground/index.html @@ -147,5 +147,5 @@ Learn more about Vimeo Stock: https://vimeo.com/blog/post/introducing-a-new-kind-of-stock-video Created by Amy Kawabata & Luke Shock. -Made with Vimeo Stock.

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
- \ No newline at end of file +Made with Vimeo Stock.

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/_payload.json b/playground/tests/_payload.json index 76302787f2..33d6064b2e 100644 --- a/playground/tests/_payload.json +++ b/playground/tests/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282709434] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353793936] \ No newline at end of file diff --git a/playground/tests/booster-layer/_payload.json b/playground/tests/booster-layer/_payload.json index acb234d611..60677a8b93 100644 --- a/playground/tests/booster-layer/_payload.json +++ b/playground/tests/booster-layer/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282709430] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353793933] \ No newline at end of file diff --git a/playground/tests/booster-layer/index.html b/playground/tests/booster-layer/index.html index 0d5e7e6c56..887310242e 100644 --- a/playground/tests/booster-layer/index.html +++ b/playground/tests/booster-layer/index.html @@ -39,5 +39,5 @@ /*! purgecss start ignore */#nuxt-booster-layer{height:0;width:0}#nuxt-booster-button-init-nojs,#nuxt-booster-layer input,#nuxt-booster-layer input:checked+*,#nuxt-booster-message-low-battery,#nuxt-booster-message-nojs,#nuxt-booster-message-reduced-bandwidth,#nuxt-booster-message-unsupported-browser,#nuxt-booster-message-weak-hardware,.nuxt-booster-button-init-nojs{display:none}/*! purgecss end ignore */ /*! purgecss start ignore */.nuxt-booster-picture[data-v-2e48fa63]{box-sizing:border-box;display:block;position:relative;width:100%}.nuxt-booster-picture img[data-v-2e48fa63]{bottom:0;box-sizing:border-box;left:0;position:absolute;right:0;top:0}.nuxt-booster-picture[data-v-2e48fa63]:before{box-sizing:border-box;content:"";display:block;position:relative}@supports (aspect-ratio:1){.nuxt-booster-picture[data-v-2e48fa63],.nuxt-booster-picture img[data-v-2e48fa63]{position:static;position:unset}.nuxt-booster-picture img[data-v-2e48fa63]{bottom:auto;bottom:unset;left:auto;left:unset;right:auto;right:unset;top:auto;top:unset}.nuxt-booster-picture[data-v-2e48fa63]:before{display:none}}/*! purgecss end ignore */ /*! purgecss start ignore */.nuxt-booster-image[data-v-84c10221]{content-visibility:auto;display:block;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}/*! purgecss end ignore */ -
BoosterLayer Test

BoosterLayer Test

Aliqua odit anim vehicula varius eget feugiat beatae. Fringilla cumque, nulla pulvinar necessitatibus pharetra vehicula ultricies egestas rhoncus justo occaecati amet, fames quod. Similique! Ornare nesciunt inventore nulla, montes doloribus, erat, parturient! Accumsan omnis doloribus perspiciatis, blanditiis ullamcorper adipisicing quisquam. Nobis placerat. Eget do sagittis elit wisi voluptates, facilisis veritatis.

Laboriosam recusandae blandit nunc tempor urna veniam? Etiam perferendis, quisquam class ea eos habitasse quis tempora nulla? Non, facilis consectetuer suspendisse tortor, etiam dolor? Blanditiis suspendisse, massa. Tempus consequatur bibendum magnam? Praesentium, posuere consequuntur, tenetur tempus quod suscipit nibh? Voluptate ratione justo! Ullamcorper! Cursus auctor magna. Beatae corporis. Inceptos nisi.

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • slow connection
  • weak hardware
  • low battery
- \ No newline at end of file +
BoosterLayer Test

BoosterLayer Test

Aliqua odit anim vehicula varius eget feugiat beatae. Fringilla cumque, nulla pulvinar necessitatibus pharetra vehicula ultricies egestas rhoncus justo occaecati amet, fames quod. Similique! Ornare nesciunt inventore nulla, montes doloribus, erat, parturient! Accumsan omnis doloribus perspiciatis, blanditiis ullamcorper adipisicing quisquam. Nobis placerat. Eget do sagittis elit wisi voluptates, facilisis veritatis.

Laboriosam recusandae blandit nunc tempor urna veniam? Etiam perferendis, quisquam class ea eos habitasse quis tempora nulla? Non, facilis consectetuer suspendisse tortor, etiam dolor? Blanditiis suspendisse, massa. Tempus consequatur bibendum magnam? Praesentium, posuere consequuntur, tenetur tempus quod suscipit nibh? Voluptate ratione justo! Ullamcorper! Cursus auctor magna. Beatae corporis. Inceptos nisi.

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • slow connection
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/booster-loader/_payload.json b/playground/tests/booster-loader/_payload.json index 2876f3d879..ffa0b3af42 100644 --- a/playground/tests/booster-loader/_payload.json +++ b/playground/tests/booster-loader/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282709431] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353793934] \ No newline at end of file diff --git a/playground/tests/booster-loader/index.html b/playground/tests/booster-loader/index.html index e1a3a53f60..fa75178f33 100644 --- a/playground/tests/booster-loader/index.html +++ b/playground/tests/booster-loader/index.html @@ -24,5 +24,5 @@
inactive

Critical
BoosterHydrate

inactive

Critical
BoosterHydrate

- \ No newline at end of file +
inactive

Critical
BoosterHydrate

inactive

Critical
BoosterHydrate

+ \ No newline at end of file diff --git a/playground/tests/iframe/_payload.json b/playground/tests/iframe/_payload.json index cb8be9028c..3efd284fad 100644 --- a/playground/tests/iframe/_payload.json +++ b/playground/tests/iframe/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282709432] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353793935] \ No newline at end of file diff --git a/playground/tests/iframe/index.html b/playground/tests/iframe/index.html index 8e28e44059..7aae6bdd52 100644 --- a/playground/tests/iframe/index.html +++ b/playground/tests/iframe/index.html @@ -55,5 +55,5 @@ .preview-container[data-v-8bf2c4c1]{display:flex;flex-direction:column;margin:3.125em 0;min-height:100vh;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch}.preview-container[data-v-8bf2c4c1]:first-child{margin-top:0}.preview-container[data-v-8bf2c4c1]:last-child{margin-bottom:0}@media (orientation:landscape){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}@media (min-width:992px){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{align-items:center;display:flex;height:50vh;justify-content:center;margin:0;overflow:hidden;width:100%}@media (orientation:landscape){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}@media (min-width:992px){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}.preview-container .info[data-v-8bf2c4c1]{font-size:2em}.preview-container .info p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}:is(.preview-container .info) p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}.preview-container .info button[data-v-8bf2c4c1]{margin:0 auto;width:90%}:is(.preview-container .info) button[data-v-8bf2c4c1]{margin:0 auto;width:90%}.preview-container .preview[data-v-8bf2c4c1]{font-size:1.125em;--bg-opacity:1;background-color:#0006}@media (prefers-color-scheme:dark){.preview-container .preview[data-v-8bf2c4c1]{background-color:#fff6}}.preview-container .preview[data-v-8bf2c4c1] img,.preview-container .preview img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) img,:is(.preview-container .preview) img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.preview-container .preview[data-v-8bf2c4c1] picture{height:100%;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) picture{height:100%;width:100%}.preview-container .preview>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}:is(.preview-container .preview)>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}.preview-container .preview>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}:is(.preview-container .preview)>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.preview-container .preview>div[data-v-8bf2c4c1] .list{list-style:none;margin:0;padding:0}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list{list-style:none;margin:0;padding:0}.preview-container .preview>div[data-v-8bf2c4c1] .list>*{margin:.625em 0}:is(:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list)>*{margin:.625em 0}.preview-container .preview>div[data-v-8bf2c4c1] .test-iframe{height:100%;position:relative;width:100%}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .test-iframe{height:100%;position:relative;width:100%} /*! purgecss start ignore */#nuxt-booster-layer{height:0;width:0}#nuxt-booster-button-init-nojs,#nuxt-booster-layer input,#nuxt-booster-layer input:checked+*,#nuxt-booster-message-low-battery,#nuxt-booster-message-nojs,#nuxt-booster-message-reduced-bandwidth,#nuxt-booster-message-unsupported-browser,#nuxt-booster-message-weak-hardware,.nuxt-booster-button-init-nojs{display:none}/*! purgecss end ignore */ .base-button[data-v-e4ca9d38]{--font-size:16;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:.0625em solid;border:calc(1/var(--font-size)*1em) solid;border-radius:.3125em;border-radius:calc(5/var(--font-size)*1em);color:currentColor;cursor:pointer;font-size:1em;font-size:calc(var(--font-size)/16*1em);outline:none;padding:.5em 1em;padding:calc(8/var(--font-size)*1em) calc(16/var(--font-size)*1em);transition:transform .1s ease-in;will-change:transform}.base-button[data-v-e4ca9d38]:hover{transform:scale(1.05)}.base-button[data-v-e4ca9d38]:active{transform:scale(.95)} -

Critical
Iframe

Lazy
Iframe

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
- \ No newline at end of file +

Critical
Iframe

Lazy
Iframe

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/image/_payload.json b/playground/tests/image/_payload.json index ecb84b8a62..e11761ef86 100644 --- a/playground/tests/image/_payload.json +++ b/playground/tests/image/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282709433] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353793929] \ No newline at end of file diff --git a/playground/tests/image/index.html b/playground/tests/image/index.html index 04b89f0d9b..29af76c786 100644 --- a/playground/tests/image/index.html +++ b/playground/tests/image/index.html @@ -64,5 +64,5 @@ .preview-container[data-v-8bf2c4c1]{display:flex;flex-direction:column;margin:3.125em 0;min-height:100vh;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch}.preview-container[data-v-8bf2c4c1]:first-child{margin-top:0}.preview-container[data-v-8bf2c4c1]:last-child{margin-bottom:0}@media (orientation:landscape){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}@media (min-width:992px){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{align-items:center;display:flex;height:50vh;justify-content:center;margin:0;overflow:hidden;width:100%}@media (orientation:landscape){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}@media (min-width:992px){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}.preview-container .info[data-v-8bf2c4c1]{font-size:2em}.preview-container .info p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}:is(.preview-container .info) p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}.preview-container .info button[data-v-8bf2c4c1]{margin:0 auto;width:90%}:is(.preview-container .info) button[data-v-8bf2c4c1]{margin:0 auto;width:90%}.preview-container .preview[data-v-8bf2c4c1]{font-size:1.125em;--bg-opacity:1;background-color:#0006}@media (prefers-color-scheme:dark){.preview-container .preview[data-v-8bf2c4c1]{background-color:#fff6}}.preview-container .preview[data-v-8bf2c4c1] img,.preview-container .preview img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) img,:is(.preview-container .preview) img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.preview-container .preview[data-v-8bf2c4c1] picture{height:100%;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) picture{height:100%;width:100%}.preview-container .preview>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}:is(.preview-container .preview)>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}.preview-container .preview>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}:is(.preview-container .preview)>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.preview-container .preview>div[data-v-8bf2c4c1] .list{list-style:none;margin:0;padding:0}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list{list-style:none;margin:0;padding:0}.preview-container .preview>div[data-v-8bf2c4c1] .list>*{margin:.625em 0}:is(:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list)>*{margin:.625em 0}.preview-container .preview>div[data-v-8bf2c4c1] .test-iframe{height:100%;position:relative;width:100%}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .test-iframe{height:100%;position:relative;width:100%} /*! purgecss start ignore */#nuxt-booster-layer{height:0;width:0}#nuxt-booster-button-init-nojs,#nuxt-booster-layer input,#nuxt-booster-layer input:checked+*,#nuxt-booster-message-low-battery,#nuxt-booster-message-nojs,#nuxt-booster-message-reduced-bandwidth,#nuxt-booster-message-unsupported-browser,#nuxt-booster-message-weak-hardware,.nuxt-booster-button-init-nojs{display:none}/*! purgecss end ignore */ .base-button[data-v-e4ca9d38]{--font-size:16;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:.0625em solid;border:calc(1/var(--font-size)*1em) solid;border-radius:.3125em;border-radius:calc(5/var(--font-size)*1em);color:currentColor;cursor:pointer;font-size:1em;font-size:calc(var(--font-size)/16*1em);outline:none;padding:.5em 1em;padding:calc(8/var(--font-size)*1em) calc(16/var(--font-size)*1em);transition:transform .1s ease-in;will-change:transform}.base-button[data-v-e4ca9d38]:hover{transform:scale(1.05)}.base-button[data-v-e4ca9d38]:active{transform:scale(.95)} -
Critical - Image

Critical - Image

Lazy - Image

Lazy - Image

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
- \ No newline at end of file +
Critical - Image

Critical - Image

Lazy - Image

Lazy - Image

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/index.html b/playground/tests/index.html index abc9d15de3..a4afa402e8 100644 --- a/playground/tests/index.html +++ b/playground/tests/index.html @@ -9,5 +9,5 @@
blank
- \ No newline at end of file +
blank
+ \ No newline at end of file diff --git a/playground/tests/picture/_payload.json b/playground/tests/picture/_payload.json index 6ddabf52b5..e23331066e 100644 --- a/playground/tests/picture/_payload.json +++ b/playground/tests/picture/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282709422] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353793928] \ No newline at end of file diff --git a/playground/tests/picture/index.html b/playground/tests/picture/index.html index ef33da9fbf..49fd3a04de 100644 --- a/playground/tests/picture/index.html +++ b/playground/tests/picture/index.html @@ -69,5 +69,5 @@ .preview-container[data-v-8bf2c4c1]{display:flex;flex-direction:column;margin:3.125em 0;min-height:100vh;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch}.preview-container[data-v-8bf2c4c1]:first-child{margin-top:0}.preview-container[data-v-8bf2c4c1]:last-child{margin-bottom:0}@media (orientation:landscape){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}@media (min-width:992px){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{align-items:center;display:flex;height:50vh;justify-content:center;margin:0;overflow:hidden;width:100%}@media (orientation:landscape){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}@media (min-width:992px){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}.preview-container .info[data-v-8bf2c4c1]{font-size:2em}.preview-container .info p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}:is(.preview-container .info) p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}.preview-container .info button[data-v-8bf2c4c1]{margin:0 auto;width:90%}:is(.preview-container .info) button[data-v-8bf2c4c1]{margin:0 auto;width:90%}.preview-container .preview[data-v-8bf2c4c1]{font-size:1.125em;--bg-opacity:1;background-color:#0006}@media (prefers-color-scheme:dark){.preview-container .preview[data-v-8bf2c4c1]{background-color:#fff6}}.preview-container .preview[data-v-8bf2c4c1] img,.preview-container .preview img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) img,:is(.preview-container .preview) img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.preview-container .preview[data-v-8bf2c4c1] picture{height:100%;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) picture{height:100%;width:100%}.preview-container .preview>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}:is(.preview-container .preview)>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}.preview-container .preview>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}:is(.preview-container .preview)>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.preview-container .preview>div[data-v-8bf2c4c1] .list{list-style:none;margin:0;padding:0}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list{list-style:none;margin:0;padding:0}.preview-container .preview>div[data-v-8bf2c4c1] .list>*{margin:.625em 0}:is(:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list)>*{margin:.625em 0}.preview-container .preview>div[data-v-8bf2c4c1] .test-iframe{height:100%;position:relative;width:100%}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .test-iframe{height:100%;position:relative;width:100%} /*! purgecss start ignore */#nuxt-booster-layer{height:0;width:0}#nuxt-booster-button-init-nojs,#nuxt-booster-layer input,#nuxt-booster-layer input:checked+*,#nuxt-booster-message-low-battery,#nuxt-booster-message-nojs,#nuxt-booster-message-reduced-bandwidth,#nuxt-booster-message-unsupported-browser,#nuxt-booster-message-weak-hardware,.nuxt-booster-button-init-nojs{display:none}/*! purgecss end ignore */ .base-button[data-v-e4ca9d38]{--font-size:16;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:.0625em solid;border:calc(1/var(--font-size)*1em) solid;border-radius:.3125em;border-radius:calc(5/var(--font-size)*1em);color:currentColor;cursor:pointer;font-size:1em;font-size:calc(var(--font-size)/16*1em);outline:none;padding:.5em 1em;padding:calc(8/var(--font-size)*1em) calc(16/var(--font-size)*1em);transition:transform .1s ease-in;will-change:transform}.base-button[data-v-e4ca9d38]:hover{transform:scale(1.05)}.base-button[data-v-e4ca9d38]:active{transform:scale(.95)} -
Critical

Critical - Picture

Lazy

Lazy - Picture

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
- \ No newline at end of file +
Critical

Critical - Picture

Lazy

Lazy - Picture

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/useBoosterHead/1/_payload.json b/playground/tests/useBoosterHead/1/_payload.json index b0f22a652b..ff3bf3d61f 100644 --- a/playground/tests/useBoosterHead/1/_payload.json +++ b/playground/tests/useBoosterHead/1/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282926404] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725354011697] \ No newline at end of file diff --git a/playground/tests/useBoosterHead/1/index.html b/playground/tests/useBoosterHead/1/index.html index 046ed5b626..cb28a86e8d 100644 --- a/playground/tests/useBoosterHead/1/index.html +++ b/playground/tests/useBoosterHead/1/index.html @@ -23,5 +23,5 @@
Transition 1Transition 2Transition 3Empty 1Empty 2

Merriweather - 400 - normal

Merriweather - 700 - normal

Merriweather - 400 - italic

Merriweather - 700 - italic

- \ No newline at end of file +
Transition 1Transition 2Transition 3Empty 1Empty 2

Merriweather - 400 - normal

Merriweather - 700 - normal

Merriweather - 400 - italic

Merriweather - 700 - italic

+ \ No newline at end of file diff --git a/playground/tests/useBoosterHead/2/_payload.json b/playground/tests/useBoosterHead/2/_payload.json index f289de6768..399269e1b8 100644 --- a/playground/tests/useBoosterHead/2/_payload.json +++ b/playground/tests/useBoosterHead/2/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282926432] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725354013398] \ No newline at end of file diff --git a/playground/tests/useBoosterHead/2/index.html b/playground/tests/useBoosterHead/2/index.html index d69b4fd97b..fa89f47d9d 100644 --- a/playground/tests/useBoosterHead/2/index.html +++ b/playground/tests/useBoosterHead/2/index.html @@ -25,5 +25,5 @@
Transition 1Transition 2Transition 3Empty 1Empty 2

Quicksand - 300 - normal

Quicksand - 400 - normal

Quicksand - 500 - normal

Quicksand - 600 - normal

Quicksand - 700 - normal

- \ No newline at end of file +
Transition 1Transition 2Transition 3Empty 1Empty 2

Quicksand - 300 - normal

Quicksand - 400 - normal

Quicksand - 500 - normal

Quicksand - 600 - normal

Quicksand - 700 - normal

+ \ No newline at end of file diff --git a/playground/tests/useBoosterHead/_payload.json b/playground/tests/useBoosterHead/_payload.json index 02a8d56626..5f1eaa70dc 100644 --- a/playground/tests/useBoosterHead/_payload.json +++ b/playground/tests/useBoosterHead/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282926218] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725354009375] \ No newline at end of file diff --git a/playground/tests/useBoosterHead/empty-1/_payload.json b/playground/tests/useBoosterHead/empty-1/_payload.json index b582efc857..201e74f03d 100644 --- a/playground/tests/useBoosterHead/empty-1/_payload.json +++ b/playground/tests/useBoosterHead/empty-1/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282926444] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725354013407] \ No newline at end of file diff --git a/playground/tests/useBoosterHead/empty-1/index.html b/playground/tests/useBoosterHead/empty-1/index.html index 30f965ad87..664f3a5594 100644 --- a/playground/tests/useBoosterHead/empty-1/index.html +++ b/playground/tests/useBoosterHead/empty-1/index.html @@ -12,5 +12,5 @@
Transition 1Transition 2Transition 3Empty 1Empty 2
EMPTY 1
- \ No newline at end of file +
Transition 1Transition 2Transition 3Empty 1Empty 2
EMPTY 1
+ \ No newline at end of file diff --git a/playground/tests/useBoosterHead/empty-2/_payload.json b/playground/tests/useBoosterHead/empty-2/_payload.json index 8d5f26f9cf..b6c1b72abf 100644 --- a/playground/tests/useBoosterHead/empty-2/_payload.json +++ b/playground/tests/useBoosterHead/empty-2/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282926472] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725354013413] \ No newline at end of file diff --git a/playground/tests/useBoosterHead/empty-2/index.html b/playground/tests/useBoosterHead/empty-2/index.html index 30d3a27c76..6b4b83b787 100644 --- a/playground/tests/useBoosterHead/empty-2/index.html +++ b/playground/tests/useBoosterHead/empty-2/index.html @@ -12,5 +12,5 @@
Transition 1Transition 2Transition 3Empty 1Empty 2
EMPTY 2
- \ No newline at end of file +
Transition 1Transition 2Transition 3Empty 1Empty 2
EMPTY 2
+ \ No newline at end of file diff --git a/playground/tests/useBoosterHead/index.html b/playground/tests/useBoosterHead/index.html index ccf4378e08..706e152859 100644 --- a/playground/tests/useBoosterHead/index.html +++ b/playground/tests/useBoosterHead/index.html @@ -28,5 +28,5 @@
Transition 1Transition 2Transition 3Empty 1Empty 2

Montserrat Alternates - 400 - normal

Montserrat Alternates - 700 - normal

Montserrat Alternates - 400 - italic

Montserrat Alternates - 700 - italic

- \ No newline at end of file +
Transition 1Transition 2Transition 3Empty 1Empty 2

Montserrat Alternates - 400 - normal

Montserrat Alternates - 700 - normal

Montserrat Alternates - 400 - italic

Montserrat Alternates - 700 - italic

+ \ No newline at end of file diff --git a/playground/tests/v-font-media/_payload.json b/playground/tests/v-font-media/_payload.json index 81a19026cc..f1ab823d6e 100644 --- a/playground/tests/v-font-media/_payload.json +++ b/playground/tests/v-font-media/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282826620] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353906021] \ No newline at end of file diff --git a/playground/tests/v-font-media/index.html b/playground/tests/v-font-media/index.html index 869890e164..17f4de6472 100644 --- a/playground/tests/v-font-media/index.html +++ b/playground/tests/v-font-media/index.html @@ -66,5 +66,5 @@ .preview-container[data-v-8bf2c4c1]{display:flex;flex-direction:column;margin:3.125em 0;min-height:100vh;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch}.preview-container[data-v-8bf2c4c1]:first-child{margin-top:0}.preview-container[data-v-8bf2c4c1]:last-child{margin-bottom:0}@media (orientation:landscape){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}@media (min-width:992px){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{align-items:center;display:flex;height:50vh;justify-content:center;margin:0;overflow:hidden;width:100%}@media (orientation:landscape){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}@media (min-width:992px){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}.preview-container .info[data-v-8bf2c4c1]{font-size:2em}.preview-container .info p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}:is(.preview-container .info) p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}.preview-container .info button[data-v-8bf2c4c1]{margin:0 auto;width:90%}:is(.preview-container .info) button[data-v-8bf2c4c1]{margin:0 auto;width:90%}.preview-container .preview[data-v-8bf2c4c1]{font-size:1.125em;--bg-opacity:1;background-color:#0006}@media (prefers-color-scheme:dark){.preview-container .preview[data-v-8bf2c4c1]{background-color:#fff6}}.preview-container .preview[data-v-8bf2c4c1] img,.preview-container .preview img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) img,:is(.preview-container .preview) img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.preview-container .preview[data-v-8bf2c4c1] picture{height:100%;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) picture{height:100%;width:100%}.preview-container .preview>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}:is(.preview-container .preview)>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}.preview-container .preview>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}:is(.preview-container .preview)>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.preview-container .preview>div[data-v-8bf2c4c1] .list{list-style:none;margin:0;padding:0}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list{list-style:none;margin:0;padding:0}.preview-container .preview>div[data-v-8bf2c4c1] .list>*{margin:.625em 0}:is(:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list)>*{margin:.625em 0}.preview-container .preview>div[data-v-8bf2c4c1] .test-iframe{height:100%;position:relative;width:100%}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .test-iframe{height:100%;position:relative;width:100%} /*! purgecss start ignore */#nuxt-booster-layer{height:0;width:0}#nuxt-booster-button-init-nojs,#nuxt-booster-layer input,#nuxt-booster-layer input:checked+*,#nuxt-booster-message-low-battery,#nuxt-booster-message-nojs,#nuxt-booster-message-reduced-bandwidth,#nuxt-booster-message-unsupported-browser,#nuxt-booster-message-weak-hardware,.nuxt-booster-button-init-nojs{display:none}/*! purgecss end ignore */ .base-button[data-v-e4ca9d38]{--font-size:16;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:.0625em solid;border:calc(1/var(--font-size)*1em) solid;border-radius:.3125em;border-radius:calc(5/var(--font-size)*1em);color:currentColor;cursor:pointer;font-size:1em;font-size:calc(var(--font-size)/16*1em);outline:none;padding:.5em 1em;padding:calc(8/var(--font-size)*1em) calc(16/var(--font-size)*1em);transition:transform .1s ease-in;will-change:transform}.base-button[data-v-e4ca9d38]:hover{transform:scale(1.05)}.base-button[data-v-e4ca9d38]:active{transform:scale(.95)} -
    • Merriweather - 300 - normal - (orientation: portrait)
    font assign simple by portrait
    • Merriweather - 300 - italic - (orientation: landscape)
    font assign simple by landscape
    • Merriweather - 700 - italic - (max-width: 479px)
    font assign simple by max 479px
    • Merriweather - 400 - normal - (min-width: 480px)
    font assign simple by 480px
    • Merriweather - 400 - italic - (min-width: 960px)
    font assign simple by 960px
    • Merriweather - 700 - normal - strong - (min-width: 1440px)
    font assign with selector by 1440px

Critical - v-font with media

    • Montserrat Alternates - 300 - normal - (orientation: portrait)
    font assign simple by portrait
    • Montserrat Alternates - 300 - italic - (orientation: landscape)
    font assign simple by landscape
    • Montserrat Alternates - 700 - italic - (max-width: 479px)
    font assign simple by max 479px
    • Montserrat Alternates - 400 - normal - (min-width: 480px)
    font assign simple by 480px
    • Montserrat Alternates - 400 - italic - (min-width: 960px)
    font assign simple by 960px
    • Montserrat Alternates - 700 - normal - strong - (min-width: 1440px)
    font assign with selector by 1440px

Lazy - v-font with media

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
- \ No newline at end of file +
    • Merriweather - 300 - normal - (orientation: portrait)
    font assign simple by portrait
    • Merriweather - 300 - italic - (orientation: landscape)
    font assign simple by landscape
    • Merriweather - 700 - italic - (max-width: 479px)
    font assign simple by max 479px
    • Merriweather - 400 - normal - (min-width: 480px)
    font assign simple by 480px
    • Merriweather - 400 - italic - (min-width: 960px)
    font assign simple by 960px
    • Merriweather - 700 - normal - strong - (min-width: 1440px)
    font assign with selector by 1440px

Critical - v-font with media

    • Montserrat Alternates - 300 - normal - (orientation: portrait)
    font assign simple by portrait
    • Montserrat Alternates - 300 - italic - (orientation: landscape)
    font assign simple by landscape
    • Montserrat Alternates - 700 - italic - (max-width: 479px)
    font assign simple by max 479px
    • Montserrat Alternates - 400 - normal - (min-width: 480px)
    font assign simple by 480px
    • Montserrat Alternates - 400 - italic - (min-width: 960px)
    font assign simple by 960px
    • Montserrat Alternates - 700 - normal - strong - (min-width: 1440px)
    font assign with selector by 1440px

Lazy - v-font with media

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/v-font-scroll/_payload.json b/playground/tests/v-font-scroll/_payload.json index a8291abd28..a43ffd08c8 100644 --- a/playground/tests/v-font-scroll/_payload.json +++ b/playground/tests/v-font-scroll/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282826645] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353909352] \ No newline at end of file diff --git a/playground/tests/v-font-scroll/index.html b/playground/tests/v-font-scroll/index.html index 97f290010e..6bf9894126 100644 --- a/playground/tests/v-font-scroll/index.html +++ b/playground/tests/v-font-scroll/index.html @@ -80,5 +80,5 @@ .preview-container[data-v-8bf2c4c1]{display:flex;flex-direction:column;margin:3.125em 0;min-height:100vh;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch}.preview-container[data-v-8bf2c4c1]:first-child{margin-top:0}.preview-container[data-v-8bf2c4c1]:last-child{margin-bottom:0}@media (orientation:landscape){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}@media (min-width:992px){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{align-items:center;display:flex;height:50vh;justify-content:center;margin:0;overflow:hidden;width:100%}@media (orientation:landscape){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}@media (min-width:992px){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}.preview-container .info[data-v-8bf2c4c1]{font-size:2em}.preview-container .info p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}:is(.preview-container .info) p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}.preview-container .info button[data-v-8bf2c4c1]{margin:0 auto;width:90%}:is(.preview-container .info) button[data-v-8bf2c4c1]{margin:0 auto;width:90%}.preview-container .preview[data-v-8bf2c4c1]{font-size:1.125em;--bg-opacity:1;background-color:#0006}@media (prefers-color-scheme:dark){.preview-container .preview[data-v-8bf2c4c1]{background-color:#fff6}}.preview-container .preview[data-v-8bf2c4c1] img,.preview-container .preview img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) img,:is(.preview-container .preview) img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.preview-container .preview[data-v-8bf2c4c1] picture{height:100%;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) picture{height:100%;width:100%}.preview-container .preview>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}:is(.preview-container .preview)>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}.preview-container .preview>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}:is(.preview-container .preview)>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.preview-container .preview>div[data-v-8bf2c4c1] .list{list-style:none;margin:0;padding:0}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list{list-style:none;margin:0;padding:0}.preview-container .preview>div[data-v-8bf2c4c1] .list>*{margin:.625em 0}:is(:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list)>*{margin:.625em 0}.preview-container .preview>div[data-v-8bf2c4c1] .test-iframe{height:100%;position:relative;width:100%}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .test-iframe{height:100%;position:relative;width:100%} /*! purgecss start ignore */#nuxt-booster-layer{height:0;width:0}#nuxt-booster-button-init-nojs,#nuxt-booster-layer input,#nuxt-booster-layer input:checked+*,#nuxt-booster-message-low-battery,#nuxt-booster-message-nojs,#nuxt-booster-message-reduced-bandwidth,#nuxt-booster-message-unsupported-browser,#nuxt-booster-message-weak-hardware,.nuxt-booster-button-init-nojs{display:none}/*! purgecss end ignore */ .base-button[data-v-e4ca9d38]{--font-size:16;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:.0625em solid;border:calc(1/var(--font-size)*1em) solid;border-radius:.3125em;border-radius:calc(5/var(--font-size)*1em);color:currentColor;cursor:pointer;font-size:1em;font-size:calc(var(--font-size)/16*1em);outline:none;padding:.5em 1em;padding:calc(8/var(--font-size)*1em) calc(16/var(--font-size)*1em);transition:transform .1s ease-in;will-change:transform}.base-button[data-v-e4ca9d38]:hover{transform:scale(1.05)}.base-button[data-v-e4ca9d38]:active{transform:scale(.95)} -
Merriweather - 300 - normal
Merriweather - 300 - italic
Merriweather - 400 - normal
Merriweather - 400 - italic
Merriweather - 700 - normal
Merriweather - 700 - italic

Horizontal Scroll - v-font

Montserrat Alternates - 300 - normal
Montserrat Alternates - 300 - italic
Montserrat Alternates - 400 - normal
Montserrat Alternates - 400 - italic
Montserrat Alternates - 700 - normal
Montserrat Alternates - 700 - italic

Vertical Scroll - v-font

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
- \ No newline at end of file +
Merriweather - 300 - normal
Merriweather - 300 - italic
Merriweather - 400 - normal
Merriweather - 400 - italic
Merriweather - 700 - normal
Merriweather - 700 - italic

Horizontal Scroll - v-font

Montserrat Alternates - 300 - normal
Montserrat Alternates - 300 - italic
Montserrat Alternates - 400 - normal
Montserrat Alternates - 400 - italic
Montserrat Alternates - 700 - normal
Montserrat Alternates - 700 - italic

Vertical Scroll - v-font

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/v-font/_payload.json b/playground/tests/v-font/_payload.json index 9e9809e349..fdaeebd1de 100644 --- a/playground/tests/v-font/_payload.json +++ b/playground/tests/v-font/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282826665] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353909452] \ No newline at end of file diff --git a/playground/tests/v-font/index.html b/playground/tests/v-font/index.html index ce5e7e974b..c2e0fbc4d6 100644 --- a/playground/tests/v-font/index.html +++ b/playground/tests/v-font/index.html @@ -64,5 +64,5 @@ .preview-container[data-v-8bf2c4c1]{display:flex;flex-direction:column;margin:3.125em 0;min-height:100vh;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch}.preview-container[data-v-8bf2c4c1]:first-child{margin-top:0}.preview-container[data-v-8bf2c4c1]:last-child{margin-bottom:0}@media (orientation:landscape){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}@media (min-width:992px){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{align-items:center;display:flex;height:50vh;justify-content:center;margin:0;overflow:hidden;width:100%}@media (orientation:landscape){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}@media (min-width:992px){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}.preview-container .info[data-v-8bf2c4c1]{font-size:2em}.preview-container .info p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}:is(.preview-container .info) p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}.preview-container .info button[data-v-8bf2c4c1]{margin:0 auto;width:90%}:is(.preview-container .info) button[data-v-8bf2c4c1]{margin:0 auto;width:90%}.preview-container .preview[data-v-8bf2c4c1]{font-size:1.125em;--bg-opacity:1;background-color:#0006}@media (prefers-color-scheme:dark){.preview-container .preview[data-v-8bf2c4c1]{background-color:#fff6}}.preview-container .preview[data-v-8bf2c4c1] img,.preview-container .preview img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) img,:is(.preview-container .preview) img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.preview-container .preview[data-v-8bf2c4c1] picture{height:100%;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) picture{height:100%;width:100%}.preview-container .preview>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}:is(.preview-container .preview)>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}.preview-container .preview>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}:is(.preview-container .preview)>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.preview-container .preview>div[data-v-8bf2c4c1] .list{list-style:none;margin:0;padding:0}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list{list-style:none;margin:0;padding:0}.preview-container .preview>div[data-v-8bf2c4c1] .list>*{margin:.625em 0}:is(:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list)>*{margin:.625em 0}.preview-container .preview>div[data-v-8bf2c4c1] .test-iframe{height:100%;position:relative;width:100%}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .test-iframe{height:100%;position:relative;width:100%} /*! purgecss start ignore */#nuxt-booster-layer{height:0;width:0}#nuxt-booster-button-init-nojs,#nuxt-booster-layer input,#nuxt-booster-layer input:checked+*,#nuxt-booster-message-low-battery,#nuxt-booster-message-nojs,#nuxt-booster-message-reduced-bandwidth,#nuxt-booster-message-unsupported-browser,#nuxt-booster-message-weak-hardware,.nuxt-booster-button-init-nojs{display:none}/*! purgecss end ignore */ .base-button[data-v-e4ca9d38]{--font-size:16;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:.0625em solid;border:calc(1/var(--font-size)*1em) solid;border-radius:.3125em;border-radius:calc(5/var(--font-size)*1em);color:currentColor;cursor:pointer;font-size:1em;font-size:calc(var(--font-size)/16*1em);outline:none;padding:.5em 1em;padding:calc(8/var(--font-size)*1em) calc(16/var(--font-size)*1em);transition:transform .1s ease-in;will-change:transform}.base-button[data-v-e4ca9d38]:hover{transform:scale(1.05)}.base-button[data-v-e4ca9d38]:active{transform:scale(.95)} -
    • Merriweather - 400 - normal
    font assign simple
    • Merriweather - 700 - normal - strong
    font assign by single selector
    • Merriweather - 700 - normal - strong
    • Merriweather - 400 - italic - em
    font assign by multiple variances
    • Merriweather - 400 - italic - em, span
    font assign by multiple selectors
    • Merriweather - 700 - italic - strong > em
    font assign by deep selector

Critical - v-font

    • Montserrat Alternates - 400 - normal
    font assign simple
    • Montserrat Alternates - 700 - normal
    font assign by single selector
    • Montserrat Alternates - 700 - normal - strong
    • Montserrat Alternates - 400 - italic - em
    font assign by multiple variances
    • Montserrat Alternates - 400 - italic - em, span
    font assign by multiple selectors
    • Montserrat Alternates - 700 - italic - strong > em
    font assign by deep selector

Lazy - v-font

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
- \ No newline at end of file +
    • Merriweather - 400 - normal
    font assign simple
    • Merriweather - 700 - normal - strong
    font assign by single selector
    • Merriweather - 700 - normal - strong
    • Merriweather - 400 - italic - em
    font assign by multiple variances
    • Merriweather - 400 - italic - em, span
    font assign by multiple selectors
    • Merriweather - 700 - italic - strong > em
    font assign by deep selector

Critical - v-font

    • Montserrat Alternates - 400 - normal
    font assign simple
    • Montserrat Alternates - 700 - normal
    font assign by single selector
    • Montserrat Alternates - 700 - normal - strong
    • Montserrat Alternates - 400 - italic - em
    font assign by multiple variances
    • Montserrat Alternates - 400 - italic - em, span
    font assign by multiple selectors
    • Montserrat Alternates - 700 - italic - strong > em
    font assign by deep selector

Lazy - v-font

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/vimeo/_payload.json b/playground/tests/vimeo/_payload.json index 93b88155b0..da528fb079 100644 --- a/playground/tests/vimeo/_payload.json +++ b/playground/tests/vimeo/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282826683] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353909482] \ No newline at end of file diff --git a/playground/tests/vimeo/index.html b/playground/tests/vimeo/index.html index ec48293062..1921e47725 100644 --- a/playground/tests/vimeo/index.html +++ b/playground/tests/vimeo/index.html @@ -84,5 +84,5 @@ /*! purgecss start ignore */.nuxt-booster-picture[data-v-2e48fa63]{box-sizing:border-box;display:block;position:relative;width:100%}.nuxt-booster-picture img[data-v-2e48fa63]{bottom:0;box-sizing:border-box;left:0;position:absolute;right:0;top:0}.nuxt-booster-picture[data-v-2e48fa63]:before{box-sizing:border-box;content:"";display:block;position:relative}@supports (aspect-ratio:1){.nuxt-booster-picture[data-v-2e48fa63],.nuxt-booster-picture img[data-v-2e48fa63]{position:static;position:unset}.nuxt-booster-picture img[data-v-2e48fa63]{bottom:auto;bottom:unset;left:auto;left:unset;right:auto;right:unset;top:auto;top:unset}.nuxt-booster-picture[data-v-2e48fa63]:before{display:none}}/*! purgecss end ignore */ /*! purgecss start ignore */.nuxt-booster-image[data-v-84c10221]{content-visibility:auto;display:block;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}/*! purgecss end ignore */ .preview-container[data-v-8bf2c4c1]{display:flex;flex-direction:column;margin:3.125em 0;min-height:100vh;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch}.preview-container[data-v-8bf2c4c1]:first-child{margin-top:0}.preview-container[data-v-8bf2c4c1]:last-child{margin-bottom:0}@media (orientation:landscape){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}@media (min-width:992px){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{align-items:center;display:flex;height:50vh;justify-content:center;margin:0;overflow:hidden;width:100%}@media (orientation:landscape){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}@media (min-width:992px){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}.preview-container .info[data-v-8bf2c4c1]{font-size:2em}.preview-container .info p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}:is(.preview-container .info) p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}.preview-container .info button[data-v-8bf2c4c1]{margin:0 auto;width:90%}:is(.preview-container .info) button[data-v-8bf2c4c1]{margin:0 auto;width:90%}.preview-container .preview[data-v-8bf2c4c1]{font-size:1.125em;--bg-opacity:1;background-color:#0006}@media (prefers-color-scheme:dark){.preview-container .preview[data-v-8bf2c4c1]{background-color:#fff6}}.preview-container .preview[data-v-8bf2c4c1] img,.preview-container .preview img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) img,:is(.preview-container .preview) img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.preview-container .preview[data-v-8bf2c4c1] picture{height:100%;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) picture{height:100%;width:100%}.preview-container .preview>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}:is(.preview-container .preview)>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}.preview-container .preview>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}:is(.preview-container .preview)>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.preview-container .preview>div[data-v-8bf2c4c1] .list{list-style:none;margin:0;padding:0}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list{list-style:none;margin:0;padding:0}.preview-container .preview>div[data-v-8bf2c4c1] .list>*{margin:.625em 0}:is(:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list)>*{margin:.625em 0}.preview-container .preview>div[data-v-8bf2c4c1] .test-iframe{height:100%;position:relative;width:100%}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .test-iframe{height:100%;position:relative;width:100%} -

Vimeo 1

Vimeo 2

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
- \ No newline at end of file +

Vimeo 1

Vimeo 2

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/weak-hardware-overlay/_payload.json b/playground/tests/weak-hardware-overlay/_payload.json index eb4e6b852f..35a9dabbc7 100644 --- a/playground/tests/weak-hardware-overlay/_payload.json +++ b/playground/tests/weak-hardware-overlay/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282826695] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353909512] \ No newline at end of file diff --git a/playground/tests/weak-hardware-overlay/index.html b/playground/tests/weak-hardware-overlay/index.html index a190688b4d..28f6b8ac1f 100644 --- a/playground/tests/weak-hardware-overlay/index.html +++ b/playground/tests/weak-hardware-overlay/index.html @@ -26,5 +26,5 @@
WeakHardwareOverlay
Area is disabled for performance reasons.

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • slow connection
  • weak hardware
  • low battery
- \ No newline at end of file +
WeakHardwareOverlay
Area is disabled for performance reasons.

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • slow connection
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/playground/tests/youtube/_payload.json b/playground/tests/youtube/_payload.json index d27f87861a..11b6462bd1 100644 --- a/playground/tests/youtube/_payload.json +++ b/playground/tests/youtube/_payload.json @@ -1 +1 @@ -[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725282826726] \ No newline at end of file +[{"data":1,"prerenderedAt":3},["ShallowReactive",2],{},1725353909513] \ No newline at end of file diff --git a/playground/tests/youtube/index.html b/playground/tests/youtube/index.html index b327b0f2b6..abe710d741 100644 --- a/playground/tests/youtube/index.html +++ b/playground/tests/youtube/index.html @@ -85,5 +85,5 @@ /*! purgecss start ignore */.nuxt-booster-picture[data-v-2e48fa63]{box-sizing:border-box;display:block;position:relative;width:100%}.nuxt-booster-picture img[data-v-2e48fa63]{bottom:0;box-sizing:border-box;left:0;position:absolute;right:0;top:0}.nuxt-booster-picture[data-v-2e48fa63]:before{box-sizing:border-box;content:"";display:block;position:relative}@supports (aspect-ratio:1){.nuxt-booster-picture[data-v-2e48fa63],.nuxt-booster-picture img[data-v-2e48fa63]{position:static;position:unset}.nuxt-booster-picture img[data-v-2e48fa63]{bottom:auto;bottom:unset;left:auto;left:unset;right:auto;right:unset;top:auto;top:unset}.nuxt-booster-picture[data-v-2e48fa63]:before{display:none}}/*! purgecss end ignore */ /*! purgecss start ignore */.nuxt-booster-image[data-v-84c10221]{content-visibility:auto;display:block;height:auto;-o-object-fit:cover;object-fit:cover;width:100%}/*! purgecss end ignore */ .preview-container[data-v-8bf2c4c1]{display:flex;flex-direction:column;margin:3.125em 0;min-height:100vh;min-height:-webkit-fill-available;min-height:-moz-available;min-height:stretch}.preview-container[data-v-8bf2c4c1]:first-child{margin-top:0}.preview-container[data-v-8bf2c4c1]:last-child{margin-bottom:0}@media (orientation:landscape){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}@media (min-width:992px){.preview-container[data-v-8bf2c4c1]{flex-direction:row}}.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{align-items:center;display:flex;height:50vh;justify-content:center;margin:0;overflow:hidden;width:100%}@media (orientation:landscape){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}@media (min-width:992px){.preview-container>.info[data-v-8bf2c4c1],.preview-container>.preview[data-v-8bf2c4c1]{height:100vh;width:50vw}}.preview-container .info[data-v-8bf2c4c1]{font-size:2em}.preview-container .info p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}:is(.preview-container .info) p[data-v-8bf2c4c1]{line-height:1.375;text-align:center}.preview-container .info button[data-v-8bf2c4c1]{margin:0 auto;width:90%}:is(.preview-container .info) button[data-v-8bf2c4c1]{margin:0 auto;width:90%}.preview-container .preview[data-v-8bf2c4c1]{font-size:1.125em;--bg-opacity:1;background-color:#0006}@media (prefers-color-scheme:dark){.preview-container .preview[data-v-8bf2c4c1]{background-color:#fff6}}.preview-container .preview[data-v-8bf2c4c1] img,.preview-container .preview img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) img,:is(.preview-container .preview) img[data-v-8bf2c4c1]{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.preview-container .preview[data-v-8bf2c4c1] picture{height:100%;width:100%}:is(.preview-container .preview[data-v-8bf2c4c1]) picture{height:100%;width:100%}.preview-container .preview>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}:is(.preview-container .preview)>article[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;text-align:center;width:100%}.preview-container .preview>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}:is(.preview-container .preview)>div[data-v-8bf2c4c1]{align-items:center;display:flex;height:100%;justify-content:center;position:relative;width:100%}.preview-container .preview>div[data-v-8bf2c4c1] .list{list-style:none;margin:0;padding:0}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list{list-style:none;margin:0;padding:0}.preview-container .preview>div[data-v-8bf2c4c1] .list>*{margin:.625em 0}:is(:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .list)>*{margin:.625em 0}.preview-container .preview>div[data-v-8bf2c4c1] .test-iframe{height:100%;position:relative;width:100%}:is(:is(.preview-container .preview)>div[data-v-8bf2c4c1]) .test-iframe{height:100%;position:relative;width:100%} -

Youtube 1

Youtube 2

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
- \ No newline at end of file +

Youtube 1

Youtube 2

Sorry, but you will have a limited user experience due to a…

  • disabled javascript
  • outdated browser
  • reduced-bandwidth
  • weak hardware
  • low battery
+ \ No newline at end of file diff --git a/v2/classes/loading-spinner.html b/v2/classes/loading-spinner.html index d59b529111..362402f43c 100644 --- a/v2/classes/loading-spinner.html +++ b/v2/classes/loading-spinner.html @@ -18,7 +18,7 @@

Appearance

- + \ No newline at end of file diff --git a/v2/components/booster-iframe.html b/v2/components/booster-iframe.html index 572c382a76..70ee82e106 100644 --- a/v2/components/booster-iframe.html +++ b/v2/components/booster-iframe.html @@ -39,7 +39,7 @@ @load="console.log('Iframe Loaded!')" @enter="console.log('Iframe enter viewport!')" />
NameDescription
loadTriggered when Iframe has finished loading.
enterTriggered when component has reached the viewport.
- + \ No newline at end of file diff --git a/v2/components/booster-image.html b/v2/components/booster-image.html index 5a42aba367..67115ea84e 100644 --- a/v2/components/booster-image.html +++ b/v2/components/booster-image.html @@ -59,7 +59,7 @@ ]

modifiers ​

You can give separate modifiers to each source. This overwrites the global ones of the preset if available.

Learn more about modifiers:

preset ​

If a preset is set on a source, the globally defined one is ignored.

This means that a separate preset can be specified for each source.

Learn more about preset:

provider ​

If a provider is set on a source, the globally defined one is ignored.

This means that a separate provider can be specified for each source.

Learn more about provider:

loadingSpinner ​

Sets a loading spinner definition of type LoadingSpinner, this describes the visual appearance of the loading state.

alt ​

Image alternative Text.

MDN - HTMLImageElement.alt

title ​

Image Title.

MDN - HTMLElement.title

crossorigin ​

If not set, the global crossorigin is used this.$booster.crossorigin.

Learn more about crossorigin option

MDN - HTML.Attributes.crossorigin

critical ​

Set component as critical component.

Learn more about critical components

Events ​

html
<booster-image 
   @load="console.log('Image Loaded!')" 
 />
NameDescription
loadTriggered when the image resource has been completely loaded.
- + \ No newline at end of file diff --git a/v2/components/booster-layer.html b/v2/components/booster-layer.html index 9e0fde1886..a02bfd56f4 100644 --- a/v2/components/booster-layer.html +++ b/v2/components/booster-layer.html @@ -70,7 +70,7 @@ </button> </div> </booster-layer>

Force App initialization ​

For Unsupported-Browser and Insufficient Hardware events, an onclick event must also be set with the id.

In the event, the global variable __NUXT_BOOSTER_AUTO_INIT__ must be set to true.

These are needed if the user has already reacted before the initial Javascript has been loaded. After the javascript has been successfully loaded, the app is automatically initialised.

VariableTypeDescriptionDefault
__NUXT_BOOSTER_AUTO_INIT__BooleanIf set, initialisation continues after the javascript has been fully loaded.false
- + \ No newline at end of file diff --git a/v2/components/booster-picture.html b/v2/components/booster-picture.html index 5127640083..f4181771f9 100644 --- a/v2/components/booster-picture.html +++ b/v2/components/booster-picture.html @@ -57,7 +57,7 @@ ]

formats ​

Overrides the pictureFormats property defined in the module options.

Defines the formats that are to be generated and provided as source in the Picture.
Is used to offer the correct image type for the browser.

WARNING

Formats can also be specified as OR condition (jpg|jpeg|png|gif). This is important when using JPGs and PNGs with the same format configuration.

loadingSpinner ​

Sets a loading spinner definition of type LoadingSpinner, this describes the visual appearance of the loading state of the BoosterImage contained in the BoosterPicture.

alt ​

Image alternative Text.

MDN - HTMLImageElement.alt

title ​

Image Title.

MDN - HTMLElement.title

crossorigin ​

If not set, the global crossorigin is used this.$booster.crossorigin.

Learn more about crossorigin option

MDN - HTML.Attributes.crossorigin

sortSources ​

If set, the sources are sorted by the media properties.

This is made possible by sort-css-media-queries.

critical ​

Set component as critical component.

Learn more about critical components

Events ​

html
<booster-picture 
   @load="console.log('Loaded!')" 
 />
NameDescription
loadTriggered when the image resource has been completely loaded.
- + \ No newline at end of file diff --git a/v2/components/booster-vimeo.html b/v2/components/booster-vimeo.html index 9c394fe6c1..12aff30a7d 100644 --- a/v2/components/booster-vimeo.html +++ b/v2/components/booster-vimeo.html @@ -70,7 +70,7 @@ @ready="console.log('Player Ready!')" @playing="console.log('Player Playing!')" />
NameDescription
readyTriggered when Vimeo Player-SDK is completely loaded.
playingTriggered when video is finished loading and playing.
- + \ No newline at end of file diff --git a/v2/components/booster-youtube.html b/v2/components/booster-youtube.html index 650586c6f4..82942b413d 100644 --- a/v2/components/booster-youtube.html +++ b/v2/components/booster-youtube.html @@ -67,7 +67,7 @@ @ready="console.log('Player Ready!')" @playing="console.log('Player Playing!')" />
NameDescription
readyTriggered when Youtube-API is completely loaded.
playingTriggered when video is finished loading and playing.
- + \ No newline at end of file diff --git a/v2/concept.html b/v2/concept.html index 60697f3f66..b1adaa12d8 100644 --- a/v2/concept.html +++ b/v2/concept.html @@ -18,7 +18,7 @@

Appearance

Concept ​

Current Situation ​

The loading behavior of webpages based on NuxtJS is designed in such a way that all necessary Javascript resources are preloaded and directly initialized with the initial load of the page. However, this behavior creates a negative impact on the Lighthouse Performance Score (TTI) for larger pages that have an increased initial load of additional resources, such as fonts, images, plugins, modules (@nuxtjs/i18n, ...).

Excursus ​

The Lighthouse Test is not a tool to make a general statement about the quality of a website programming. Lighthouse rather tries to map a metric for the usability of a page from the user's point of view. This includes accessibility, best practices, SEO and of course performance.

This last point is often misinterpreted by developers. If you want to implement features that increase usability for the user (interactions/more complex animations, ...), this will always have an impact on performance in the Lighthouse Test for larger website projects, as the corresponding Javascript must be loaded for this. Finally, Lighthouse does also not rate the design, but the accessibility (size of click areas, etc.) of a website. You should therefore not ask yourself the following question: "How can I fully optimize my JavaScript to achieve a Lighthouse score of 100/100?". You have to ask yourself much more the question: "What is especially important to a user with low bandwidth or weak hardware on my site?".

The answer to this is relatively simple: the content must be accessible and you must be able to get to the information you need quickly.

No more and no less.

The user doesn't need any fancy slider animations and parallax effects that can only be implemented with certain libraries. Or a softload mechanism to get to more pages in a more elegant and animated way, but which initially needs an increased amount of javascript logic. All he wants is that information is retrievable reasonably fast and he can click through the presence.

Problem ​

The good news is that the NuxtJS SSR build provides the right foundation. The content is already in the form of HTML and CSS and can be used without Javascript. But what is missing

  • is a fully automated preload logic that allows component and viewport based handling and prioritization of the individual resources (FCP, LCP, CLS)
  • is a logic that enables a perfomance-oriented initialization of the javascript (TTI, TBT)

These two central points are handled by Nuxt Booster and enable a fast and resource-saving loading behavior of the website.

Approach ​

Over a longer period of time, we analyzed the Google Lighthouse test in more detail and approached the topic with the help of use cases. We did not start with the best case for page content (one image, one font, minimal javascript), but with the worst case (many images, many fonts, large Javascript files, ...). So we avoided to develop only a solution for simple SinglePages. Our claim was much more to create a generalistic, performant solution even with a CMS connection and dynamic component compositions per page. All our thoughts are based on HTTP/2 request prioritization and the lazy hydration approach. Initial resources are prioritized by preload and all further data is reloaded viewport-based.

Insights & Solutions ​

During the tests, we gained the following insights, which we would like to share with you, but which also allow us to draw conclusions regarding the performance optimization of the initial loading process and which have been incorporated into the Nuxt Booster solution.

Critical Render Path ​

The critical render path is the core of a high-performance and efficient loading and rendering behavior of a website. It is important that components and resources in the viewport are loaded and executed with priority so that the user can be provided with a functioning page as quickly as possible. A browser is not able to recognize this fully automatically to dynamically adapt the loading behavior. Some attempts have been made in the past to systematically identify the critical render path.However, this has the consequence that every generated page in a virtual browser has to be analyzed in given viewport sizes, which slows down the deployment process and makes it more error-prone. For this reason, we (the developers) will be forced to provide the build process with appropriate hints in the form of a Critical Attribute on the affected component, so that an automated optimization by preloads, lazy hydration, etc. can be performed in response.

Font Loading ​

Fonts are the great mystery on the Internet. For more complex designs it is not uncommon that more than 6 font files have to be loaded. It would be desirable if there were many more variable fonts, but the reality is usually different. Often, developers are forced to register tons of fonts with different font styles. So it can happen that the website needs a total count of 12 font files, which have to be loaded initially to achieve the right visual result on the whole page.

This is a real performance problem. If you look for solutions, you like to hear

  • don't use WebFonts that have to be loaded
  • use another optimized font
  • reduce the number of used fonts
  • embed the fonts via Base64

You will find some articles about font loading. But most of them are more than 3 years old. Summary: not much happened here. A nice and recommendable list of different strategies can be found at web-font-loading-recipes or comprehensive-webfonts. From this it can be deduced that there is still no universal solution to the problem. However, it is possible to approach the issue very efficiently by using a preload strategy and setting classes accordingly. However, this does not make the handling of the fonts any easier. On the one hand, the preloads have to be defined per page and on the other hand, the CSS in the respective component has to be activated with the corresponding font declaration per class on demand. This is manageable for smaller projects in a 1 person team. But if several people are working in parallel, it can quickly become a nightmare. This will inevitably lead to the fact that the approach will not be accepted by the team and the optimization will be optimized out of the project in the long run.

INFO

A few words about Google Fonts: If possible, the FontFaces should always be included directly as Woff/Woff2 files via inline style. The loading mechanism via external CSS file, as it is the case with Google Fonts, creates an additional network roundtrip, which delays the loading of the actual font files.

The strategy mentioned above makes sense, but is hardly implementable with the current tools. For this reason, we are introducing Directive v-font, which takes care of the outlined behavior in a fully automated way and thus represents a truly relevant solution even on larger projects. Combined with the lazy hydration approach, the relevant fonts can be declared and loaded per component. The preloads are controlled via the critical attribute. With the help of this loading strategy, a FOUT (flash of unstyled text) and CLS can be massively reduced or eliminated. If no javascript is activated on the end device, all fonts are automatically activated via CSS.

Image Loading ​

For image compression and different image formats, the module nuxt-optimized-images was popularly used in the nuxt world in the past. The downside, however, is that this approach is not particularly CMS and deployment friendly. With each image change, a full build process had to be initiated. For this reason, we use the nuxt-image module, as this takes advantage of a change in NuxtJS as of version 2.13.0. In this version update, the build was split into two separate processes (javascript compilation + page generation). With nuxt-optimized-images the full build process had to be run for every image change. This is no longer the case with nuxt-image. Here only the page generation process is necessary. As a result, deployment times for all content changes can be massively reduced.

We use the module in its complete form. However, we have redeveloped the nuxt-image and nuxt-picture components, as the current version does not fully meet our requirements. For example, we lacked an appropriate preloading and lazy hydration strategy. Although there is a native loading attribute on the image element that allows prioritization, the use for websites with a lot of images is still not optimal, because the distance-from-viewport threshold is still too generous and the loading performance can deteriorate unintentionally. For this we have implemented a corresponding SEO-compliant alternative, which loads the images only when the viewport is reached, but also provides the image sources for search engines via no-script tag. This way all relevant images can be displayed even if Javascript is disabled. Furthermore you can also define multiple image sources in the picture, so it is possible to display an image in portait mode with a 9/16 aspect-ratio (multiple renditions) and in landscape mode with a 16/9 aspect-ratio (multiple renditions).

Javascript Loading ​

NuxtJS follows the approach to load the core files (page, app, payload, vendor, state, etc.) as fast and efficient as possible via (module-)preload from the client. This also makes total sense if you want to deliver an SPA. For the SSR build, however, we modified the delivery a bit. The many parallel downloads (fonts, images, js, ...) have a negative impact from a performance perspective. This effect increases when the javascript files grow in size due to modules and plugins. It would make sense if the initial package is kept small and only the absolutely necessary resources that can trigger the further initialization process are transferred via dynamic import. This leaves enough bandwidth to load the remaining resources (fonts, images).

This loading behavior only makes sense with an SSR build, since the full page-related static content can already be delivered and rendered with the HTML and the included CSS. This means that the user does not notice any time lags and the page is still usable. Another advantage: If the bandwidth is low, a basic functionality of the page (links, ...) can be ensured thanks to the SSR build.

RequestIdleCallback ​

The TimeRemaining function of the IdleDeadline object continuously returns a value <= 10 in the Lighthouse Test (simulated Motorola G4). This can be seen as an indicator for weak hardware on the end device and allows the following conclusion. If there are not enough hardware resources available to execute the JavaScript quickly, this process is suppressed. Who needs optional functionality that takes a long time to initialize and possibly leads to a temporary freeze in the browser.

We use this effect by executing the intial javascript process and the component initialization in the RequestIdleCallback, if we get a time slot >10ms from the device. Hereby we achieve a massive reduction of the TTI/TBT in the Lighthouse Test and on weak hardware, because the javascript execution is simply paused in the worst case until sufficient resources are available. This also prevents blocking of the MainThread.

Side effect: The timeslots in the Google Lighthouse Test are always <= 10ms, so no javascript will be initialized.

BoosterLayer ​

With the solutions described above, the user gets a functioning webpage displayed very quickly. However, the following situation can also occur on the end device:

  • no Javascript enabled
  • reduced bandwidth
  • weak hardware
  • unsupported browser

The reduced bandwidth or weak hardware should get a focus especially when larger amounts of data have to be transferred and executed, e.g. a ThreeJS component with more complex 3D objects. In this case, we should inform the user that the experience will be negatively affected and that there may be waiting times.

For this purpose, we provide an InfoLayer that is displayed when a minimum FCP time is exceeded, when the number of available CPU cores falls below a minimum level, when javascript is disabled or the users opens the page by an unsupported browser. The user can decide in this dialog box whether he wants to load the remaining resources despite the restrictions. If the user declines this dialog, only the fonts and images for the page will be loaded and no further javascript will be loaded or executed.

Conclusion ​

The findings and solutions described above have been incorporated and systematized in the Nuxt Booster module. Only in combination can they unfold their full functionality and ensure an overall optimization of the loading behavior. Overall we have reduced the following timing metrics ...

  • FCP
  • LCP
  • TTI
  • TBT

With this module we enable every developer in the NuxtJS context to achieve a Lighthouse Performance Score 100/100 and drastically reduce the development time for website performance optimization.

- + \ No newline at end of file diff --git a/v2/directives/v-font.html b/v2/directives/v-font.html index 291c73667e..8b6daa1f3a 100644 --- a/v2/directives/v-font.html +++ b/v2/directives/v-font.html @@ -57,7 +57,7 @@ <div v-html="…" /> </div> </template> - + \ No newline at end of file diff --git a/v2/guide/caveats.html b/v2/guide/caveats.html index 6fed8d6896..5c57914385 100644 --- a/v2/guide/caveats.html +++ b/v2/guide/caveats.html @@ -12,7 +12,7 @@ - + @@ -36,7 +36,7 @@ }); } } -</script>

Issues ​

Browser compatibility ​

You can use nuxt-booster with Internet Explorer 11 browser.

INFO

Note that there is no optimization based on preloads in IE 11.

You need the following polyfills:

The PostCSS Plugin postcss-object-fit-images and following build.transpile entries for @nuxt/image:

For the polyfills, it is recommended to integrate them as a plugin, polyfills loading must follow a specific order.

You can see a example with live demo at Nuxt Booster Example.

Example ​

js
async function polyfills (){
+</script>

Issues ​

Browser compatibility ​

You can use nuxt-booster with Internet Explorer 11 browser.

INFO

Note that there is no optimization based on preloads in IE 11.

You need the following polyfills:

The PostCSS Plugin postcss-object-fit-images and following build.transpile entries for @nuxt/image:

For the polyfills, it is recommended to integrate them as a plugin, polyfills loading must follow a specific order.

You can see a example with live demo at Nuxt Booster Example.

Example ​

js
async function polyfills (){
 
   if (!('IntersectionObserver' in global)) {
     await import('intersection-observer');
@@ -53,7 +53,7 @@
 
 }
 
-polyfills ();

js
{
+polyfills ();

js
{
   build: {
     
     transpile: ['@nuxt/image', 'image-meta'],
@@ -97,7 +97,7 @@
     }
   };
 </script>
- + \ No newline at end of file diff --git a/v2/guide/options.html b/v2/guide/options.html index d6b38030a8..33bd5063ea 100644 --- a/v2/guide/options.html +++ b/v2/guide/options.html @@ -75,7 +75,7 @@ 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 ​

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

DANGER

Note that the use of BoosterImage, BoosterPicture, BoosterVimeo and BoosterYoutube is not supported if @nuxt/image is not integrated.

- + \ No newline at end of file diff --git a/v2/guide/setup.html b/v2/guide/setup.html index e0f2bc4c0b..e9f944e1d1 100644 --- a/v2/guide/setup.html +++ b/v2/guide/setup.html @@ -12,18 +12,18 @@ - + -

Appearance

Setup ​

Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.

Installation ​

Install nuxt-booster as a dependency to your project:

bash
yarn add nuxt-booster@2
bash
npm install nuxt-booster@2

Add nuxt-booster to the modules section of nuxt.config.js:

@nuxt/image ​

Nuxt Booster uses the module @nuxt/image, if this is not already present, it will be integrated automatically.

It is necessary for the use of the components BoosterYoutube and BoosterVimeo to add aliases and domains to the @nuxt/image options. These are needed to retrieve the images from Youtube and Vimeo.

js
{
+    
Appearance
Setup ​
Check the Nuxt.js documentation for more information about installing and using modules in Nuxt.js.
Installation ​
Install nuxt-booster as a dependency to your project:
bash
yarn add nuxt-booster@2
bash
npm install nuxt-booster@2
Add nuxt-booster to the modules section of nuxt.config.js:
@nuxt/image ​
Nuxt Booster uses the module @nuxt/image, if this is not already present, it will be integrated automatically.
It is necessary for the use of the components BoosterYoutube and BoosterVimeo to add aliases and domains to the @nuxt/image options. These are needed to retrieve the images from Youtube and Vimeo.
js
{
   domains: ['img.youtube.com', 'i.vimeocdn.com'],
   alias: {
     youtube: 'https://img.youtube.com',
     vimeo: 'https://i.vimeocdn.com',
   }
-}
More about @nuxt/image module options can be found here.
Example Configuration ​
js
{
+}
More about @nuxt/image module options can be found here.
Example Configuration ​
js
{
   modules: [
     'nuxt-booster'
   ],
@@ -118,7 +118,7 @@
     }
   }
 }
See module options.

-    
+    
     
   
 
\ No newline at end of file
diff --git a/v2/guide/usage.html b/v2/guide/usage.html
index 04b3d2e77e..3a356aa41c 100644
--- a/v2/guide/usage.html
+++ b/v2/guide/usage.html
@@ -35,7 +35,7 @@
   }
 }
 </script>

INFO

The booster components will be expanded in the future. If you have explicit wishes, please send us a feature request or directly a pull request with the corresponding feature 😃

- + \ No newline at end of file diff --git a/v2/index.html b/v2/index.html index a8926f1743..b958170d75 100644 --- a/v2/index.html +++ b/v2/index.html @@ -19,7 +19,7 @@

Appearance

nuxt boosternuxt booster

Module for NuxtJS.

WARNING

You are reading Nuxt Booster v2 docs. For Nuxt 3 go to the v3 docs

Nuxt Booster takes over the lighthouse performance optimization of your generated website.

In order to achieve a performance score of 100/100, only the necessary resources located in the current viewport may be initialized when the page is loaded. This includes images, fonts and the js-modules. Until now, there has been no practical and usable concept to help developers maintain an overview and enable accurate targeting in NuxtJS projects.

This module addresses this problem and provides a holistic approach to intelligently load the necessary viewport related resources to reduce FCP, DCL, TTI, TBT and CLS.

We didn't reinvent the whole wheel. We adapt the lazy hydration concept of Markus Oberlehner to load js components in an efficient way, use the nuxt/image module as a base to retrieve optimized image resolutions for our picture and image components and add some new stuff to obtain a holistic solution.

Requirements ​

  • NodeJS >= 12.x.x
  • NuxtJS >= 2.15.0

Features ​

We provide the following CMS-friendly features:

  • dynamic loading of viewport based page resources like fonts, components, pictures, images and iframes
  • optional blocking of javascript execution by initial performance measuring
  • optimized initial load of javascript files by eliminating of unnecessary javascript files
  • prevents the loading of unnecessary resources (including components) that are outside the current viewport.
  • optional info layer concept to inform users about a reduced UX when bandwidth or hardware is compromised.
  • completely new approach of font declaration
  • optimized picture component (supports viewport based sources e.g. landscape/portrait)
  • optimized image component
  • supports SEO-friendly lazy hydration mode (picture + image)
  • optimized youtube/vimeo component (auto generated poster image in different resolutions)

Results ​

  • delivery of the minimum required resources based on the current viewport
  • if you use the tools as specified you will get a lighthouse performance score of 100/100
- + \ No newline at end of file