chore(deps): update all non-major dependencies

docs/package.json

@@ -29,7 +29,7 @@
     "@nuxtjs/eslint-module": "4.1.0",
     "@nuxtjs/robots": "3.0.0",
     "@nuxtlabs/github-module": "1.6.3",
-    "nuxt": "3.6.5",
+    "nuxt": "3.7.1",
     "theme-colors": "0.0.5"
   }
 }

package.json

@@ -64,17 +64,17 @@
     "vue3-lazy-hydration": "1.2.1"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "7.22.10",
+    "@babel/eslint-parser": "7.22.15",
     "@commitlint/cli": "17.7.1",
     "@commitlint/config-conventional": "17.7.0",
     "@fullhuman/postcss-purgecss": "5.0.0",
-    "@nuxt/module-builder": "0.4.0",
-    "@nuxt/webpack-builder": "3.6.5",
+    "@nuxt/module-builder": "0.5.1",
+    "@nuxt/webpack-builder": "3.7.1",
     "@nuxtjs/eslint-config": "12.0.0",
     "@nuxtjs/eslint-module": "4.1.0",
     "@nuxtjs/stylelint-module": "5.1.0",
     "commitlint": "17.7.1",
-    "core-js": "3.32.0",
+    "core-js": "3.32.2",
     "esbuild": "0.19.2",
     "eslint-config-prettier": "9.0.0",
     "eslint-formatter-json-relative": "0.1.0",
@@ -83,27 +83,27 @@
     "eslint-plugin-no-unsanitized": "4.0.2",
     "eslint-plugin-prettier": "5.0.0",
     "eslint-plugin-security": "1.7.1",
-    "eslint-plugin-sonarjs": "0.20.0",
+    "eslint-plugin-sonarjs": "0.21.0",
     "eslint-plugin-xss": "0.1.12",
     "finalhandler": "1.2.0",
-    "get-port-please": "3.0.1",
+    "get-port-please": "3.1.1",
     "husky": "8.0.3",
     "jsdom": "22.1.0",
     "lint-staged": "13.3.0",
-    "nuxt": "3.6.5",
+    "nuxt": "3.7.1",
     "pinst": "3.0.0",
-    "playwright": "1.37.0",
+    "playwright": "1.37.1",
     "postcss-functions": "4.0.2",
     "postcss-html": "1.5.0",
     "postcss-nesting": "12.0.1",
-    "postcss-preset-env": "9.1.1",
-    "prettier": "3.0.2",
-    "read-pkg": "8.0.0",
+    "postcss-preset-env": "9.1.3",
+    "prettier": "3.0.3",
+    "read-pkg": "8.1.0",
     "serve-static": "1.15.0",
     "stylelint-config-recess-order": "4.3.0",
     "stylelint-config-standard": "34.0.0",
     "vite-svg-loader": "4.0.0",
-    "vitest": "0.34.1",
+    "vitest": "0.34.4",
     "wicg-inert": "3.1.2"
   }
 }

playground/pages/tests/iframe/components/Critical.vue

@@ -1,7 +1,7 @@
 <template>
   <preview-container>
     <template #default>
-      <default-iframe class="test-iframe" :iframe-src="iframeSrc" />
+      <default-iframe class="test-iframe" :src="iframeSrc" />
     </template>
     <template #title>
       <p>Critical<br />Iframe</p>

src/runtime/components/SpeedkitImage/Base.vue

@@ -23,7 +23,7 @@ import { getCrossorigin } from '#speedkit/utils';
 import Source from '#speedkit/components/SpeedkitImage/classes/Source';
 import useCritical from '#speedkit/composables/critical';
 
-import { useImage, useNuxtApp, useHead, computed } from '#imports';
+import { ref, useImage, useNuxtApp, useHead, computed } from '#imports';
 
 export default {
   inheritAttrs: false,
@@ -72,35 +72,40 @@ export default {
         ...source.getOptions()
       });
 
-      const meta = await source.getMeta(config.src, $speedkit);
-      const className = meta.className;
-
-      useHead({
-        style: [meta.value && getImageStyleDescription(meta, className)].filter(
-          Boolean
-        ),
-        link: [
-          !(!config || !isCritical.value) &&
-            new Source(source).getPreload(
-              config.srcset,
-              config.sizes,
-              resolvedCrossorigin.value
-            )
-        ].filter(Boolean),
-        noscript: [
-          {
-            key: 'img-nojs',
-            children:
-              '<style>img { content-visibility: unset !important; }</style>'
-          }
-        ]
+      const meta = ref(null);
+
+      useHead(() => {
+        if (meta.value) {
+          return {
+            style: [
+              meta.value && getImageStyleDescription(meta, meta.value.className)
+            ].filter(Boolean),
+            link: [
+              !(!config || !isCritical.value) &&
+                new Source(source).getPreload(
+                  config.srcset,
+                  config.sizes,
+                  resolvedCrossorigin.value
+                )
+            ].filter(Boolean),
+            noscript: [
+              {
+                key: 'img-nojs',
+                children:
+                  '<style>img { content-visibility: unset !important; }</style>'
+              }
+            ]
+          };
+        }
       });
 
+      meta.value = await source.getMeta(config.src, $speedkit);
+
       return {
         isCritical,
         config,
         meta,
-        className,
+        className: meta.value.className,
         resolvedCrossorigin
       };
     }

src/runtime/components/SpeedkitPicture/Base.vue

@@ -26,7 +26,7 @@ import BaseImage from '#speedkit/components/SpeedkitImage/Base';
 import SourceList from '#speedkit/components/SpeedkitPicture/classes/SourceList';
 import PictureSource from '#speedkit/components/SpeedkitPicture/Source';
 
-import { useImage, useHead, useNuxtApp } from '#imports';
+import { ref, useImage, useHead, useNuxtApp } from '#imports';
 
 const TARGET_FORMAT_PRIORITY = ['avif', 'webp', 'png', 'jpg', 'gif'];
 
@@ -84,21 +84,25 @@ export default {
       sort: props.sortSources
     });
 
-    const metaSources = await sourceList.getMeta($img, $speedkit);
-    const classNames = metaSources.classNames;
+    const metaSources = ref(null);
 
-    if (metaSources.length) {
-      useHead({
-        style: [getPictureStyleDescription(metaSources, classNames)]
-      });
-    }
+    useHead(() => {
+      if (metaSources.value && metaSources.value.length) {
+        const classNames = metaSources.value.classNames;
+        return {
+          style: [getPictureStyleDescription(metaSources.value, classNames)]
+        };
+      }
+    });
+
+    metaSources.value = await sourceList.getMeta($img, $speedkit);
 
     return {
       isCritical,
       resolvedFormats: props.formats || $speedkit.targetFormats,
       sourceList,
       metaSources,
-      classNames
+      classNames: metaSources.value.classNames
     };
   },
 

src/runtime/components/SpeedkitVimeo/Base.vue

@@ -90,6 +90,13 @@ export default {
   emits: ['playing', 'ready'],
 
   async setup(props) {
+    const script = ref([]);
+    useHead({
+      script: computed(() => {
+        return script.value;
+      })
+    });
+
     const { withQuery } = await import('ufo');
     const videoData = ref(null);
     const iframeMode = ref(false);
@@ -102,12 +109,6 @@ export default {
           .replace(/&/g, '&') ||
         `https://player.vimeo.com/video/${props.videoId}`
     );
-    const script = ref([]);
-    useHead({
-      script: computed(() => {
-        return script.value;
-      })
-    });
 
     try {
       const url = withQuery('https://vimeo.com/api/oembed.json', {