Next

.github/workflows/main.yml

@@ -75,7 +75,7 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          npx -p pinst -p @nuxt/module-builder -p semantic-release -p @semantic-release/git -p @semantic-release/changelog -p @semantic-release/exec -p @semantic-release/github semantic-release --provider=github --debug=true
+          npx -p @nuxt/module-builder -p semantic-release -p @semantic-release/git -p @semantic-release/changelog -p @semantic-release/exec -p @semantic-release/github semantic-release --provider=github --debug=true
 
   build-playground:
     name: Build (Playground)

.github/workflows/next.yml

@@ -75,4 +75,4 @@ jobs:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
         run: |
-          npx -p pinst -p @nuxt/module-builder -p semantic-release -p @semantic-release/git -p @semantic-release/changelog -p @semantic-release/exec -p @semantic-release/github semantic-release --provider=github --debug=true
+          npx -p @nuxt/module-builder -p semantic-release -p @semantic-release/git -p @semantic-release/changelog -p @semantic-release/exec -p @semantic-release/github semantic-release --provider=github --debug=true

CHANGELOG.md

@@ -1,5 +1,48 @@
 # Project Changelog
 
+# [3.1.0-next.2](https://github.com/basics/nuxt-booster/compare/v3.1.0-next.1...v3.1.0-next.2) (2024-07-25)
+
+
+### Bug Fixes
+
+* **vimeo:** fix missing title ([b099fc7](https://github.com/basics/nuxt-booster/commit/b099fc713eedec821b93252a6859b1643b80d366))
+
+# [3.1.0-next.1](https://github.com/basics/nuxt-booster/compare/v3.0.17-next.4...v3.1.0-next.1) (2024-07-25)
+
+
+### Features
+
+* **player:** properties replaced with property `posterSources` ([d4c67d3](https://github.com/basics/nuxt-booster/commit/d4c67d3cfe48f2a71b76587126dfef700ff9396a))
+
+## [3.0.17-next.4](https://github.com/basics/nuxt-booster/compare/v3.0.17-next.3...v3.0.17-next.4) (2024-07-21)
+
+
+### Bug Fixes
+
+* **optimization:** added useBoosterCritical youtube/vimeo ([a159706](https://github.com/basics/nuxt-booster/commit/a159706f0335ae4d4b37b626287f112add401ab0))
+
+## [3.0.17-next.3](https://github.com/basics/nuxt-booster/compare/v3.0.17-next.2...v3.0.17-next.3) (2024-07-02)
+
+
+### Bug Fixes
+
+* **module:** improve optimization options ([e5fc73a](https://github.com/basics/nuxt-booster/commit/e5fc73aa26b9ab9db0400969cbc6eea00375fb86))
+* **module:** update optimization ([5122215](https://github.com/basics/nuxt-booster/commit/5122215637c4737e8bf8768f97d5d63e5c12f18b))
+
+## [3.0.17-next.2](https://github.com/basics/nuxt-booster/compare/v3.0.17-next.1...v3.0.17-next.2) (2024-06-30)
+
+
+### Bug Fixes
+
+* **components:** added `posterSrc` for override ([baddaa1](https://github.com/basics/nuxt-booster/commit/baddaa1a97f08273f3e85afb8babe69d79e16cbb))
+
+## [3.0.17-next.1](https://github.com/basics/nuxt-booster/compare/v3.0.16...v3.0.17-next.1) (2024-06-21)
+
+
+### Bug Fixes
+
+* **blob:** added missing dep ([31a975a](https://github.com/basics/nuxt-booster/commit/31a975ad9a4de73257cb53c05d7e550fc87e4201))
+
 ## [3.0.16](https://github.com/basics/nuxt-booster/compare/v3.0.15...v3.0.16) (2024-05-28)
 
 

docs/.vitepress/navigation.js

@@ -112,7 +112,8 @@ export default {
           items: [
             { text: 'v2.0.x to v2.0.13', link: '/migration/v2-0-13' },
             { text: 'v2.0.13 to v2.2.0', link: '/migration/v2-2-0' },
-            { text: 'v2 to v3', link: '/migration/v3' }
+            { text: 'v2 to v3', link: '/migration/v3' },
+            { text: 'v3 to v3.1.0', link: '/migration/v3.1.0' }
           ]
         }
       ]

docs/src/components/booster-image.md

@@ -135,9 +135,14 @@ The image width, is definied by [`screens`](https://image.nuxtjs.org/configurati
 In the following example, one image with two different image sizes by breakpoints and output format is `webp`.
 
 ````js
-[
-  { format: 'webp', src: '/img/image.jpg', sizes: { default: '100vw', sm: '100vw' } }
-]
+{ 
+  format: 'webp', 
+  src: '/img/image.jpg', 
+  sizes: { 
+    default: '100vw', 
+    sm: '100vw' 
+  } 
+}
 ````
 
 #### `modifiers`
@@ -147,6 +152,21 @@ In the following example, one image with two different image sizes by breakpoint
 You can give separate modifiers to each source.
 This overwrites the global ones of the preset if available.
 
+**Example**
+
+````js
+{ 
+  src: '/img/image.jpg', 
+  modifiers: { 
+    width: 200,
+    height: 200,
+    fit: 'cover',
+    negate: true,
+    grayscale: true 
+  } 
+}
+````
+
 Learn more about `modifiers`:
 
 - <https://image.nuxt.com/usage/nuxt-img#modifiers>

docs/src/components/booster-vimeo.md

@@ -16,7 +16,7 @@ The `BoosterVimeo` is used to initialise Vimeo videos with [`Vimeo Player-SDK`](
 
 The `url` of the Vimeo video must be specified.  
 
-The `BoosterPicture` is used for the poster, so the generation of the poster is automated, you can define the image sizes with [`sizes` (What is sizes?)](/components/booster-image#source).
+The `BoosterPicture` is used for the poster, so the generation of the poster is automated, you can define the image sources with [`posterSources` (What is posterSources?)](/components/booster-picture#sources).
 
 [Learn more about `BoosterPicture`](/components/booster-picture)
 
@@ -44,8 +44,14 @@ Important: For using `BoosterVimeo` do not disable `@nuxt/image` via `disableNux
 import BoosterVimeo from '#booster/components/BoosterVimeo';
 
 defineProps({
-  url: { type: String, default: '<vimeo-url>' },
-  title: { type: String, default: 'Vimeo Title' },
+  url: { 
+    type: String, 
+    default: '<vimeo-url>' 
+  },
+  title: { 
+    type: String, 
+    default: 'Vimeo Title' 
+  },
   options: {
     type: String,
     default() {
@@ -54,15 +60,15 @@ defineProps({
       };
     }
   },
-  posterSizes: {
-    type: Object,
-    default() {
-      return {
-        default: '100vw',
-        md: '50vw'
-      };
+  posterSources: [
+    {
+      src: undefined,
+      media: 'all',
+      sizes: {
+        default: '100vw'
+      }
     }
-  }
+  ]
 });
 
 const onPlaying = () => console.log('Vimeo Player playing!');
@@ -79,7 +85,8 @@ const onPlaying = () => console.log('Vimeo Player playing!');
   autoplay: false,
   mute: false,
   posterSizes: { … },
-  options: { … }
+  options: { … },
+  posterSources: { … },
 }
 ````
 
@@ -109,10 +116,27 @@ When set starts video in autoplay. It is required that the component is integrat
 
 When set the player is muted.
 
-### `posterSizes`
+### `posterSources`
 
-- Type: `String`
-  - Default: `{ default: '100vw', xxs: '100vw', xs: '100vw', sm: '100vw', md: '100vw', lg: '100vw', xl: '100vw', xxl: '100vw' }`
+- Type: `Array`
+  - Default: `[
+          {
+            src: undefined,
+            media: 'all',
+            sizes: {
+              default: '100vw'
+            }
+          }
+        ]`
+
+Sets the image sources of the poster.
+
+::: info
+You can overwrite the poster `src` with your own.  
+The `src` property is optionally available for this purpose.
+:::
+
+[Learn more about `sources`](/components/booster-picture#sources)
 
 Sets the image sizes of the poster.
 

docs/src/components/booster-youtube.md

@@ -16,7 +16,7 @@ The `BoosterYoutube`is used to initialise Youtube videos with [`Youtube Iframe-A
 
 The `url` of the Youtube video must be specified.  
 
-The `BoosterPicture` is used for the poster, so the generation of the poster is automated, you can define the image sizes with [`sizes` (What is sizes?)](/components/booster-picture#sources).
+The `BoosterPicture` is used for the poster, so the generation of the poster is automated, you can define the image sources with [`posterSources` (What is posterSources?)](/components/booster-picture#sources).
 
 [Learn more about `BoosterPicture`](/components/booster-picture)
 
@@ -56,16 +56,16 @@ defineProps({
         fs: false // use boolean instead of 0 or 1
       };
     }
-  },
-  posterSizes: {
-    type: Object,
-    default() {
-      return {
-        default: '100vw',
-        md: '50vw'
-      };
+  },  
+  posterSources: [
+    {
+      src: undefined,
+      media: 'all',
+      sizes: {
+        default: '100vw'
+      }
     }
-  }
+  ]
 });
 
 const onPlaying = () => console.log('Youtube Player playing!');
@@ -81,8 +81,8 @@ const onPlaying = () => console.log('Youtube Player playing!');
   title: 'Player Title',
   autoplay: false,
   mute: false,
-  posterSizes: { … },
-  options: { … }
+  options: { … },
+  posterSources: { … },
 }
 ````
 
@@ -112,14 +112,27 @@ When set starts video in autoplay. It is required that the component is integrat
 
 When set the player is muted.
 
-### `posterSizes`
+### `posterSources`
 
-- Type: `String`
-  - Default: `{ default: '100vw', xxs: '100vw', xs: '100vw', sm: '100vw', md: '100vw', lg: '100vw', xl: '100vw', xxl: '100vw' }`
+- Type: `Array`
+  - Default: `[
+          {
+            src: undefined,
+            media: 'all',
+            sizes: {
+              default: '100vw'
+            }
+          }
+        ]`
 
-Sets the image sizes of the poster.
+Sets the image sources of the poster.
 
-[Learn more about `sizes`](/components/booster-picture#sources)
+::: info
+You can overwrite the poster `src` with your own.  
+The `src` property is optionally available for this purpose.
+:::
+
+[Learn more about `sources`](/components/booster-picture#sources)
 
 ### `options`
 
@@ -145,10 +158,6 @@ This is important for autoplay on mobile devices.
 
 Sets the host for the player.
 
-::: info
-It is recommended to use the default (<https://www.youtube-nocookie.com>).
-:::
-
 ## Slots
 
 ````html

docs/src/guide/options.md

@@ -16,19 +16,37 @@ The default value is the `crossorigin` value from the [Render Configuration](htt
 
 [MDN - HTML.Attributes.crossorigin](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin)
 
-## `optimizePreloads`
+## `optimizeSSR`
 
-- Type: `Boolean`
+- Type: `Boolean`, `Object`
   - Default: `true`
 
-Activating this option optimizes the initial script preloads and removes unnecessary loads.
+Activating this option optimizes the initial load.
+
+- remove unnecessary preloads
+- remove unnecessary prefetches
+- inline critical CSS
 
 The following NuxtJS settings are made or overwritten in the `nuxt.config`:
 
-| Property                           | Value   |
-| ---------------------------------- | ------- |
-| `nuxt.options.vite.build.manifest` | `false` |
-| `nuxt.options.noScripts`           | `true`  |
+| Property                                    | Value  |
+| ------------------------------------------- | ------ |
+| `nuxt.options.experimental.inlineSSRStyles` | `false` |
+| `nuxt.options.vite.build.manifest`          | `false` |
+| `nuxt.options.vite.build.cssCodeSplit`      | `true` |
+| `nuxt.options.webpack.extractCSS`           | `true` |
+
+You can also pass an object to customize the optimization.
+
+````js
+{
+  optimizeSSR: {
+    cleanPreloads: true,
+    cleanPrefetches: true,
+    inlineStyles: true
+  }
+}
+````
 
 ## `detection`
 
@@ -44,10 +62,10 @@ These options can be used to define the initial checks to display the [`BoosterL
 }
 ````
 
- | Key              | Type      | Required | Description                                                                                                                                                                                        | Default |
- | ---------------- | --------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+ | Key              | Type      | Required | Description                                                                                                                                                                                            | Default |
+ | ---------------- | --------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------- |
  | `performance`    | `Boolean` | yes      | Checking whether the [minimum characteristic values](/guide/options#performancemetrics) have been reached. If the test is negative, the [`BoosterLayer`](/components/booster-layer) will be displayed. | `true`  |
- | `browserSupport` | `Boolean` | yes      | Check if the current browser on client side is supported. If the test is negative, the [`BoosterLayer`](/components/booster-layer) will be displayed.                                            | `true`  |
+ | `browserSupport` | `Boolean` | yes      | Check if the current browser on client side is supported. If the test is negative, the [`BoosterLayer`](/components/booster-layer) will be displayed.                                                  | `true`  |
  | `battery`        | `Boolean` | yes      | Check if the current user save power in browser. If the test is negative, the [`BoosterLayer`](/components/booster-layer) will be displayed.                                                           | `true`  |
 
 ::: info
@@ -251,9 +269,9 @@ Global option for the [`IntersectionObserver`](https://developer.mozilla.org/en-
 }
 ````
 
- | Key         | Type     | Required | Description                                                                                                                                                                       | Default |
- | ----------- | -------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
- | `component` | `String` | yes      | [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) value for [`BoosterHydrate`](/guide/usage#import-components).                         | `0%`    |
+ | Key         | Type     | Required | Description                                                                                                                                                                     | Default |
+ | ----------- | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- |
+ | `component` | `String` | yes      | [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) value for [`BoosterHydrate`](/guide/usage#import-components).                  | `0%`    |
  | `asset`     | `String` | yes      | [`rootMargin`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) value for all static ressources (`v-font`, `BoosterPicture` & `BoosterImage`). | `0%`    |
 
 ## `disableNuxtFontaine`