From 27daf75b552f213b3c8772e77087e4d94afdcf62 Mon Sep 17 00:00:00 2001
From: Thorn Walli <lammpee@gmail.com>
Date: Tue, 13 Jun 2023 16:03:06 +0200
Subject: [PATCH] fix(update): update components & pages

---
 playground/.nuxtignore                        |  2 +
 playground/components/InfoLayer.vue           |  7 +--
 .../components/elements/GithubCorner.vue      | 30 +++++------
 playground/components/elements/LoaderTest.vue |  2 +
 .../components/fragments/PageHeaderMenu.vue   |  9 +++-
 playground/layouts/default.vue                |  4 +-
 playground/nuxt.config.mjs                    | 37 +++++++-------
 playground/pages/index.vue                    |  4 +-
 .../tests/iframe/components/Critical.vue      | 19 ++-----
 .../pages/tests/iframe/components/Lazy.vue    | 19 ++-----
 playground/pages/tests/iframe/index.vue       | 13 ++---
 .../pages/tests/image/components/Critical.vue | 43 ++++++----------
 .../pages/tests/image/components/Lazy.vue     | 41 ++++++---------
 playground/pages/tests/image/index.vue        | 13 ++---
 .../tests/picture/components/Critical.vue     | 46 +++++++----------
 .../pages/tests/picture/components/Lazy.vue   | 46 +++++++----------
 playground/pages/tests/picture/index.vue      | 13 ++---
 .../pages/tests/speedkit-layer/index.vue      |  4 +-
 .../speedkit-loader/components/Critical.vue   |  9 +---
 .../tests/speedkit-loader/components/Lazy.vue |  9 +---
 .../pages/tests/speedkit-loader/index.vue     | 18 +++----
 playground/pages/tests/v-font-media/index.vue | 13 ++---
 .../v-font-scroll/components/Horizontal.vue   | 32 +++++-------
 .../v-font-scroll/components/Vertical.vue     | 30 +++++------
 .../pages/tests/v-font-scroll/index.vue       | 13 ++---
 playground/pages/tests/v-font/index.vue       | 13 ++---
 .../pages/tests/vimeo/components/Default.vue  | 48 ++++++++---------
 playground/pages/tests/vimeo/index.vue        |  6 +--
 .../tests/weak-hardware-overlay/index.vue     |  7 +--
 .../tests/youtube/components/Default.vue      | 51 ++++++++-----------
 playground/pages/tests/youtube/index.vue      |  4 +-
 test/nuxt.config.mjs                          |  8 ++-
 test/tests/browser.mjs                        |  2 +-
 33 files changed, 234 insertions(+), 381 deletions(-)

diff --git a/playground/.nuxtignore b/playground/.nuxtignore
index c4a4857441..c25153ab76 100644
--- a/playground/.nuxtignore
+++ b/playground/.nuxtignore
@@ -1 +1,3 @@
 pages/**/components/**/*.vue
+# pages/**/*.vue
+# !pages/index.vue
diff --git a/playground/components/InfoLayer.vue b/playground/components/InfoLayer.vue
index 359b11e7dd..00e1e1f703 100644
--- a/playground/components/InfoLayer.vue
+++ b/playground/components/InfoLayer.vue
@@ -34,7 +34,6 @@ import { useHead } from '#imports';
 import SpeedkitLayer from '#speedkit/components/SpeedkitLayer';
 import BaseButton from '@/components/base/Button';
 import useFonts from '#speedkit/composables/fonts';
-
 const { $getFont } = useFonts();
 
 useHead({
@@ -45,12 +44,8 @@ useHead({
     )
   ]
 });
-</script>
 
-<script>
-export default {
-  inheritAttrs: false
-};
+defineOptions({ inheritAttrs: false });
 </script>
 
 <style lang="postcss" scoped>
diff --git a/playground/components/elements/GithubCorner.vue b/playground/components/elements/GithubCorner.vue
index f8700612a5..eb62c6dcf8 100644
--- a/playground/components/elements/GithubCorner.vue
+++ b/playground/components/elements/GithubCorner.vue
@@ -21,23 +21,21 @@
   </a>
 </template>
 
-<script>
-export default {
-  props: {
-    title: {
-      type: String,
-      default: 'View source on GitHub'
-    },
-    target: {
-      type: String,
-      default: '_blank'
-    },
-    url: {
-      type: String,
-      default: 'https://your-url'
-    }
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    default: 'View source on GitHub'
+  },
+  target: {
+    type: String,
+    default: '_blank'
+  },
+  url: {
+    type: String,
+    default: 'https://your-url'
   }
-};
+});
 </script>
 
 <style lang="postcss" scoped>
diff --git a/playground/components/elements/LoaderTest.vue b/playground/components/elements/LoaderTest.vue
index 009070e5fe..070831e712 100644
--- a/playground/components/elements/LoaderTest.vue
+++ b/playground/components/elements/LoaderTest.vue
@@ -7,7 +7,9 @@
 <script setup>
 import { ref } from 'vue';
 import { onMounted } from '#imports';
+import useCritical from '#speedkit/composables/critical';
 
+const { isCritical } = useCritical();
 const active = ref(false);
 
 onMounted(() => (active.value = true));
diff --git a/playground/components/fragments/PageHeaderMenu.vue b/playground/components/fragments/PageHeaderMenu.vue
index 8e3ba42b6c..a287e498af 100644
--- a/playground/components/fragments/PageHeaderMenu.vue
+++ b/playground/components/fragments/PageHeaderMenu.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script setup>
-import { watch, computed } from 'vue';
+import { watch, computed, ref, onMounted } from 'vue';
 import { useRoute } from '#app';
 import Headline from '@/components/base/Headline';
 import LinkList from '@/components/base/LinkList';
@@ -70,7 +70,12 @@ const props = defineProps({
   }
 });
 
-const inert = computed(() => props.modelValue);
+const mounted = ref(false);
+onMounted(() => {
+  mounted.value = true;
+});
+
+const inert = computed(() => mounted.value && !props.modelValue);
 const emit = defineEmits(['update:modelValue']);
 
 const route = useRoute();
diff --git a/playground/layouts/default.vue b/playground/layouts/default.vue
index 202661a5a0..a75e8ee568 100644
--- a/playground/layouts/default.vue
+++ b/playground/layouts/default.vue
@@ -1,7 +1,9 @@
 <template>
   <div>
     <page-header v-model="menuOpened" v-bind="pageHeaderData" />
-    <slot :inert="menuOpened" />
+    <main :inert="menuOpened">
+      <slot />
+    </main>
     <info-layer v-if="!$config.public.disableInfoLayer" critical />
     <github-corner :url="$config.public.githubRepoUrl" />
   </div>
diff --git a/playground/nuxt.config.mjs b/playground/nuxt.config.mjs
index 6fd8f10d32..715281e599 100644
--- a/playground/nuxt.config.mjs
+++ b/playground/nuxt.config.mjs
@@ -25,12 +25,27 @@ export default defineNuxtConfig(async () => {
     runtimeConfig: {
       public: {
         githubRepoUrl: repository.url,
-        disableInfoLayer: true
+        disableInfoLayer: false
       }
     },
 
     app: {
-      baseURL: getBaseUrl()
+      baseURL: getBaseUrl(),
+      head: {
+        htmlAttrs: {
+          lang: 'en'
+        },
+        meta: [
+          {
+            charset: 'utf-8'
+          },
+          {
+            name: 'viewport',
+            content: 'width=device-width, initial-scale=1'
+          }
+        ],
+        link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
+      }
     },
 
     devServer: {
@@ -385,23 +400,7 @@ export default defineNuxtConfig(async () => {
       ]
     },
 
-    modules: ['../src/module'],
-
-    head: {
-      htmlAttrs: {
-        lang: 'en'
-      },
-      meta: [
-        {
-          charset: 'utf-8'
-        },
-        {
-          name: 'viewport',
-          content: 'width=device-width, initial-scale=1'
-        }
-      ],
-      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
-    }
+    modules: ['../src/module']
   };
 });
 
diff --git a/playground/pages/index.vue b/playground/pages/index.vue
index db122925c8..aaa578250d 100644
--- a/playground/pages/index.vue
+++ b/playground/pages/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="page-index">
+  <div>
     <module-stage v-bind="stage" />
     <module-text-a v-bind="textA" />
     <module-image-text v-bind="imageTextA" />
@@ -9,7 +9,7 @@
     <module-image-text v-bind="imageTextB" />
     <module-text-b v-bind="textB" />
     <module-video-vimeo v-bind="videoVimeoB" />
-  </main>
+  </div>
 </template>
 
 <script setup>
diff --git a/playground/pages/tests/iframe/components/Critical.vue b/playground/pages/tests/iframe/components/Critical.vue
index 7dd08df666..9494db6adf 100644
--- a/playground/pages/tests/iframe/components/Critical.vue
+++ b/playground/pages/tests/iframe/components/Critical.vue
@@ -1,7 +1,7 @@
 <template>
   <preview-container>
     <template #default>
-      <default-iframe class="test-iframe" v-bind="iframe" />
+      <default-iframe class="test-iframe" :iframe-src="iframeSrc" />
     </template>
     <template #title>
       <p>Critical<br />Iframe</p>
@@ -9,22 +9,9 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import DefaultIframe from '#speedkit/components/SpeedkitIframe';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    DefaultIframe,
-    PreviewContainer
-  },
-
-  data() {
-    return {
-      iframe: {
-        src: 'https://grabarzundpartner.de'
-      }
-    };
-  }
-};
+const iframeSrc = 'https://grabarzundpartner.de';
 </script>
diff --git a/playground/pages/tests/iframe/components/Lazy.vue b/playground/pages/tests/iframe/components/Lazy.vue
index a2b9164ddc..3efd24c7a4 100644
--- a/playground/pages/tests/iframe/components/Lazy.vue
+++ b/playground/pages/tests/iframe/components/Lazy.vue
@@ -1,7 +1,7 @@
 <template>
   <preview-container id="lazyContainer">
     <template #default>
-      <default-iframe class="test-iframe" v-bind="iframe" />
+      <default-iframe class="test-iframe" :src="iframeSrc" />
     </template>
     <template #title>
       <p>Lazy<br />Iframe</p>
@@ -9,22 +9,9 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import DefaultIframe from '#speedkit/components/SpeedkitIframe';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    DefaultIframe,
-    PreviewContainer
-  },
-
-  data() {
-    return {
-      iframe: {
-        src: 'https://grabarzundpartner.de'
-      }
-    };
-  }
-};
+const iframeSrc = 'https://grabarzundpartner.de';
 </script>
diff --git a/playground/pages/tests/iframe/index.vue b/playground/pages/tests/iframe/index.vue
index e8b7a249b1..6058a4eebe 100644
--- a/playground/pages/tests/iframe/index.vue
+++ b/playground/pages/tests/iframe/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <main>
+  <div>
     <critical critical />
     <lazy />
-  </main>
+  </div>
 </template>
 
-<script>
+<script setup>
 import Critical from './components/Critical';
 import Lazy from './components/Lazy';
-
-export default {
-  components: {
-    Critical,
-    Lazy
-  }
-};
 </script>
diff --git a/playground/pages/tests/image/components/Critical.vue b/playground/pages/tests/image/components/Critical.vue
index 4c0c2ee85e..7e2b491dba 100644
--- a/playground/pages/tests/image/components/Critical.vue
+++ b/playground/pages/tests/image/components/Critical.vue
@@ -9,36 +9,25 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import SpeedkitImage from '#speedkit/components/SpeedkitImage';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    SpeedkitImage,
-    PreviewContainer
-  },
-
-  data() {
-    return {
-      image: {
-        title: 'Critical - Image',
-        source: {
-          format: 'jpg',
-          src: '/img/critical.jpg',
-          sizes: {
-            default: '100vw',
-            xxs: '100vw',
-            xs: '100vw',
-            sm: '100vw',
-            md: '100vw',
-            lg: '100vw',
-            xl: '100vw',
-            xxl: '100vw'
-          }
-        }
-      }
-    };
+const image = {
+  title: 'Critical - Image',
+  source: {
+    format: 'jpg',
+    src: '/img/critical.jpg',
+    sizes: {
+      default: '100vw',
+      xxs: '100vw',
+      xs: '100vw',
+      sm: '100vw',
+      md: '100vw',
+      lg: '100vw',
+      xl: '100vw',
+      xxl: '100vw'
+    }
   }
 };
 </script>
diff --git a/playground/pages/tests/image/components/Lazy.vue b/playground/pages/tests/image/components/Lazy.vue
index e4b28f6f21..4f0f5e3982 100644
--- a/playground/pages/tests/image/components/Lazy.vue
+++ b/playground/pages/tests/image/components/Lazy.vue
@@ -9,35 +9,24 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import SpeedkitImage from '#speedkit/components/SpeedkitImage';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    SpeedkitImage,
-    PreviewContainer
-  },
-
-  data() {
-    return {
-      image: {
-        title: 'Lazy - Image',
-        source: {
-          src: '/img/lazy.jpg',
-          sizes: {
-            default: '100vw',
-            xxs: '100vw',
-            xs: '100vw',
-            sm: '100vw',
-            md: '100vw',
-            lg: '100vw',
-            xl: '100vw',
-            xxl: '100vw'
-          }
-        }
-      }
-    };
+const image = {
+  title: 'Lazy - Image',
+  source: {
+    src: '/img/lazy.jpg',
+    sizes: {
+      default: '100vw',
+      xxs: '100vw',
+      xs: '100vw',
+      sm: '100vw',
+      md: '100vw',
+      lg: '100vw',
+      xl: '100vw',
+      xxl: '100vw'
+    }
   }
 };
 </script>
diff --git a/playground/pages/tests/image/index.vue b/playground/pages/tests/image/index.vue
index e8b7a249b1..6058a4eebe 100644
--- a/playground/pages/tests/image/index.vue
+++ b/playground/pages/tests/image/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <main>
+  <div>
     <critical critical />
     <lazy />
-  </main>
+  </div>
 </template>
 
-<script>
+<script setup>
 import Critical from './components/Critical';
 import Lazy from './components/Lazy';
-
-export default {
-  components: {
-    Critical,
-    Lazy
-  }
-};
 </script>
diff --git a/playground/pages/tests/picture/components/Critical.vue b/playground/pages/tests/picture/components/Critical.vue
index 4fe3434502..642fa66b24 100644
--- a/playground/pages/tests/picture/components/Critical.vue
+++ b/playground/pages/tests/picture/components/Critical.vue
@@ -9,38 +9,26 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import SpeedkitPicture from '#speedkit/components/SpeedkitPicture';
-
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    SpeedkitPicture,
-    PreviewContainer
-  },
-
-  data() {
-    return {
-      picture: {
-        title: 'Critical',
-        sources: [
-          {
-            src: '/img/critical.jpg',
-            sizes: {
-              default: '100vw',
-              xxs: '100vw',
-              xs: '100vw',
-              sm: '100vw',
-              md: '100vw',
-              lg: '100vw',
-              xl: '100vw',
-              xxl: '100vw'
-            }
-          }
-        ]
+const picture = {
+  title: 'Critical',
+  sources: [
+    {
+      src: '/img/critical.jpg',
+      sizes: {
+        default: '100vw',
+        xxs: '100vw',
+        xs: '100vw',
+        sm: '100vw',
+        md: '100vw',
+        lg: '100vw',
+        xl: '100vw',
+        xxl: '100vw'
       }
-    };
-  }
+    }
+  ]
 };
 </script>
diff --git a/playground/pages/tests/picture/components/Lazy.vue b/playground/pages/tests/picture/components/Lazy.vue
index 1743ad8d22..211c24d126 100644
--- a/playground/pages/tests/picture/components/Lazy.vue
+++ b/playground/pages/tests/picture/components/Lazy.vue
@@ -9,38 +9,26 @@
   </organism-preview-container>
 </template>
 
-<script>
+<script setup>
 import SpeedkitPicture from '#speedkit/components/SpeedkitPicture';
-
 import OrganismPreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    SpeedkitPicture,
-    OrganismPreviewContainer
-  },
-
-  data() {
-    return {
-      picture: {
-        title: 'Lazy',
-        sources: [
-          {
-            src: '/img/lazy.jpg',
-            sizes: {
-              default: '100vw',
-              xxs: '100vw',
-              xs: '100vw',
-              sm: '100vw',
-              md: '100vw',
-              lg: '100vw',
-              xl: '100vw',
-              xxl: '100vw'
-            }
-          }
-        ]
+const picture = {
+  title: 'Lazy',
+  sources: [
+    {
+      src: '/img/lazy.jpg',
+      sizes: {
+        default: '100vw',
+        xxs: '100vw',
+        xs: '100vw',
+        sm: '100vw',
+        md: '100vw',
+        lg: '100vw',
+        xl: '100vw',
+        xxl: '100vw'
       }
-    };
-  }
+    }
+  ]
 };
 </script>
diff --git a/playground/pages/tests/picture/index.vue b/playground/pages/tests/picture/index.vue
index e8b7a249b1..6058a4eebe 100644
--- a/playground/pages/tests/picture/index.vue
+++ b/playground/pages/tests/picture/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <main>
+  <div>
     <critical critical />
     <lazy />
-  </main>
+  </div>
 </template>
 
-<script>
+<script setup>
 import Critical from './components/Critical';
 import Lazy from './components/Lazy';
-
-export default {
-  components: {
-    Critical,
-    Lazy
-  }
-};
 </script>
diff --git a/playground/pages/tests/speedkit-layer/index.vue b/playground/pages/tests/speedkit-layer/index.vue
index 463ff68530..33d698ec7d 100644
--- a/playground/pages/tests/speedkit-layer/index.vue
+++ b/playground/pages/tests/speedkit-layer/index.vue
@@ -1,8 +1,8 @@
 <template>
-  <main :class="{ ready }">
+  <div :class="{ ready }">
     <component-image-text v-bind="imageTextA" />
     <speedkit-layer :max-idle-duration="0" />
-  </main>
+  </div>
 </template>
 
 <script setup>
diff --git a/playground/pages/tests/speedkit-loader/components/Critical.vue b/playground/pages/tests/speedkit-loader/components/Critical.vue
index 536225e2f2..5ad4916409 100644
--- a/playground/pages/tests/speedkit-loader/components/Critical.vue
+++ b/playground/pages/tests/speedkit-loader/components/Critical.vue
@@ -9,14 +9,7 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import LoaderTest from '@/components/elements/LoaderTest';
 import PreviewContainer from '@/components/PreviewContainer';
-
-export default {
-  components: {
-    PreviewContainer,
-    LoaderTest
-  }
-};
 </script>
diff --git a/playground/pages/tests/speedkit-loader/components/Lazy.vue b/playground/pages/tests/speedkit-loader/components/Lazy.vue
index 0e2f8d89b7..d8452700e8 100644
--- a/playground/pages/tests/speedkit-loader/components/Lazy.vue
+++ b/playground/pages/tests/speedkit-loader/components/Lazy.vue
@@ -9,14 +9,7 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import LoaderTest from '@/components/elements/LoaderTest';
 import PreviewContainer from '@/components/PreviewContainer';
-
-export default {
-  components: {
-    PreviewContainer,
-    LoaderTest
-  }
-};
 </script>
diff --git a/playground/pages/tests/speedkit-loader/index.vue b/playground/pages/tests/speedkit-loader/index.vue
index f5d5b6dcbc..8d27738d47 100644
--- a/playground/pages/tests/speedkit-loader/index.vue
+++ b/playground/pages/tests/speedkit-loader/index.vue
@@ -1,18 +1,18 @@
 <template>
-  <main>
+  <div>
     <critical critical />
     <lazy />
-  </main>
+  </div>
 </template>
 
-<script>
+<script setup>
 import speedkitHydrate from '#speedkit/hydrate';
+import { definePageMeta } from '#imports';
 
-export default {
-  components: {
-    Critical: speedkitHydrate(() => import('./components/Critical')),
-    Lazy: speedkitHydrate(() => import('./components/Lazy'))
-  },
+const Critical = speedkitHydrate(() => import('./components/Critical'));
+const Lazy = speedkitHydrate(() => import('./components/Lazy'));
+
+definePageMeta({
   layout: 'blank'
-};
+});
 </script>
diff --git a/playground/pages/tests/v-font-media/index.vue b/playground/pages/tests/v-font-media/index.vue
index e8b7a249b1..6058a4eebe 100644
--- a/playground/pages/tests/v-font-media/index.vue
+++ b/playground/pages/tests/v-font-media/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <main>
+  <div>
     <critical critical />
     <lazy />
-  </main>
+  </div>
 </template>
 
-<script>
+<script setup>
 import Critical from './components/Critical';
 import Lazy from './components/Lazy';
-
-export default {
-  components: {
-    Critical,
-    Lazy
-  }
-};
 </script>
diff --git a/playground/pages/tests/v-font-scroll/components/Horizontal.vue b/playground/pages/tests/v-font-scroll/components/Horizontal.vue
index a7b674108f..6cb5f72050 100644
--- a/playground/pages/tests/v-font-scroll/components/Horizontal.vue
+++ b/playground/pages/tests/v-font-scroll/components/Horizontal.vue
@@ -1,7 +1,7 @@
 <template>
   <preview-container>
     <template #default>
-      <scroll-container id="horizontalScroll" v-bind="scrollContainer" />
+      <scroll-container id="horizontalScroll" v-bind="data" />
     </template>
     <template #title>
       <p>Horizontal Scroll - v-font</p>
@@ -9,25 +9,19 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import PreviewContainer from '@/components/PreviewContainer';
 import ScrollContainer from '@/components/fragments/ScrollContainer';
-export default {
-  components: { PreviewContainer, ScrollContainer },
-  data() {
-    return {
-      scrollContainer: {
-        directionHorizontal: true,
-        items: [
-          { font: ['Merriweather', 300, 'normal'] },
-          { font: ['Merriweather', 300, 'italic'] },
-          { font: ['Merriweather', 400, 'normal'] },
-          { font: ['Merriweather', 400, 'italic'] },
-          { font: ['Merriweather', 700, 'normal'] },
-          { font: ['Merriweather', 700, 'italic'] }
-        ]
-      }
-    };
-  }
+
+const data = {
+  directionHorizontal: true,
+  items: [
+    { font: ['Merriweather', 300, 'normal'] },
+    { font: ['Merriweather', 300, 'italic'] },
+    { font: ['Merriweather', 400, 'normal'] },
+    { font: ['Merriweather', 400, 'italic'] },
+    { font: ['Merriweather', 700, 'normal'] },
+    { font: ['Merriweather', 700, 'italic'] }
+  ]
 };
 </script>
diff --git a/playground/pages/tests/v-font-scroll/components/Vertical.vue b/playground/pages/tests/v-font-scroll/components/Vertical.vue
index cbe15f5402..c05f05c93d 100644
--- a/playground/pages/tests/v-font-scroll/components/Vertical.vue
+++ b/playground/pages/tests/v-font-scroll/components/Vertical.vue
@@ -1,7 +1,7 @@
 <template>
   <preview-container>
     <template #default>
-      <scroll-container id="verticalScroll" v-bind="scrollContainer" />
+      <scroll-container id="verticalScroll" v-bind="data" />
     </template>
     <template #title>
       <p>Vertical Scroll - v-font</p>
@@ -9,24 +9,18 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
 import PreviewContainer from '@/components/PreviewContainer';
 import ScrollContainer from '@/components/fragments/ScrollContainer';
-export default {
-  components: { PreviewContainer, ScrollContainer },
-  data() {
-    return {
-      scrollContainer: {
-        items: [
-          { font: ['Montserrat Alternates', 300, 'normal'] },
-          { font: ['Montserrat Alternates', 300, 'italic'] },
-          { font: ['Montserrat Alternates', 400, 'normal'] },
-          { font: ['Montserrat Alternates', 400, 'italic'] },
-          { font: ['Montserrat Alternates', 700, 'normal'] },
-          { font: ['Montserrat Alternates', 700, 'italic'] }
-        ]
-      }
-    };
-  }
+
+const data = {
+  items: [
+    { font: ['Montserrat Alternates', 300, 'normal'] },
+    { font: ['Montserrat Alternates', 300, 'italic'] },
+    { font: ['Montserrat Alternates', 400, 'normal'] },
+    { font: ['Montserrat Alternates', 400, 'italic'] },
+    { font: ['Montserrat Alternates', 700, 'normal'] },
+    { font: ['Montserrat Alternates', 700, 'italic'] }
+  ]
 };
 </script>
diff --git a/playground/pages/tests/v-font-scroll/index.vue b/playground/pages/tests/v-font-scroll/index.vue
index 2a6b3bad75..4c78a2a0f7 100644
--- a/playground/pages/tests/v-font-scroll/index.vue
+++ b/playground/pages/tests/v-font-scroll/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <main>
+  <div>
     <horizontal />
     <vertical />
-  </main>
+  </div>
 </template>
 
-<script>
+<script setup>
 import Horizontal from './components/Horizontal';
 import Vertical from './components/Vertical';
-
-export default {
-  components: {
-    Horizontal,
-    Vertical
-  }
-};
 </script>
diff --git a/playground/pages/tests/v-font/index.vue b/playground/pages/tests/v-font/index.vue
index e8b7a249b1..6058a4eebe 100644
--- a/playground/pages/tests/v-font/index.vue
+++ b/playground/pages/tests/v-font/index.vue
@@ -1,18 +1,11 @@
 <template>
-  <main>
+  <div>
     <critical critical />
     <lazy />
-  </main>
+  </div>
 </template>
 
-<script>
+<script setup>
 import Critical from './components/Critical';
 import Lazy from './components/Lazy';
-
-export default {
-  components: {
-    Critical,
-    Lazy
-  }
-};
 </script>
diff --git a/playground/pages/tests/vimeo/components/Default.vue b/playground/pages/tests/vimeo/components/Default.vue
index 7c9cbd289e..34cab3f8d9 100644
--- a/playground/pages/tests/vimeo/components/Default.vue
+++ b/playground/pages/tests/vimeo/components/Default.vue
@@ -11,40 +11,32 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue';
 import DefaultVimeo from '#speedkit/components/SpeedkitVimeo';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    DefaultVimeo,
-    PreviewContainer
+const props = defineProps({
+  vimeoUrl: {
+    type: String,
+    default: 'https://vimeo.com/440265549'
   },
 
-  props: {
-    vimeoUrl: {
-      type: String,
-      default: 'https://vimeo.com/440265549'
-    },
-
-    title: {
-      type: String,
-      default: 'Vimeo'
-    },
-
-    autoplay: {
-      type: Boolean,
-      default: false
-    }
+  title: {
+    type: String,
+    default: 'Vimeo'
   },
 
-  computed: {
-    vimeo() {
-      return {
-        url: this.vimeoUrl,
-        autoplay: this.autoplay
-      };
-    }
+  autoplay: {
+    type: Boolean,
+    default: false
   }
-};
+});
+
+const vimeo = computed(() => {
+  return {
+    url: props.vimeoUrl,
+    autoplay: props.autoplay
+  };
+});
 </script>
diff --git a/playground/pages/tests/vimeo/index.vue b/playground/pages/tests/vimeo/index.vue
index 31c9a049ae..b2cc8dab7e 100644
--- a/playground/pages/tests/vimeo/index.vue
+++ b/playground/pages/tests/vimeo/index.vue
@@ -1,19 +1,17 @@
 <template>
-  <main>
+  <div>
     <default
       v-for="(item, index) in items"
       :id="`vimeo-${index}`"
       v-bind="item"
       :key="item.vimeoUrl"
       :critical="index < 1" />
-  </main>
+  </div>
 </template>
 
 <script setup>
 import speedkitHydrate from '#speedkit/hydrate';
-
 const Default = speedkitHydrate(() => import('./components/Default'));
-
 const items = [
   {
     vimeoUrl: 'https://vimeo.com/440265549',
diff --git a/playground/pages/tests/weak-hardware-overlay/index.vue b/playground/pages/tests/weak-hardware-overlay/index.vue
index 481e6bf02c..30d41b0ed4 100644
--- a/playground/pages/tests/weak-hardware-overlay/index.vue
+++ b/playground/pages/tests/weak-hardware-overlay/index.vue
@@ -1,15 +1,16 @@
 <template>
-  <main :class="{ mounted }" tag="main">
+  <div :class="{ mounted }">
     <div>
       WeakHardwareOverlay
       <speedkit-weak-hardware-overlay />
     </div>
     <speedkit-layer />
-  </main>
+  </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue';
+import { definePageMeta } from '#imports';
 
 import SpeedkitLayer from '#speedkit/components/SpeedkitLayer';
 import SpeedkitWeakHardwareOverlay from '#speedkit/components/WeakHardwareOverlay';
@@ -20,7 +21,7 @@ onMounted(() => {
   mounted.value = true;
 });
 
-defineOptions({
+definePageMeta({
   layout: 'blank'
 });
 </script>
diff --git a/playground/pages/tests/youtube/components/Default.vue b/playground/pages/tests/youtube/components/Default.vue
index 27dd944fea..2aca1c9089 100644
--- a/playground/pages/tests/youtube/components/Default.vue
+++ b/playground/pages/tests/youtube/components/Default.vue
@@ -11,41 +11,34 @@
   </preview-container>
 </template>
 
-<script>
+<script setup>
+import { computed } from 'vue';
+
 import DefaultYoutube from '#speedkit/components/SpeedkitYoutube';
 import PreviewContainer from '@/components/PreviewContainer';
 
-export default {
-  components: {
-    PreviewContainer,
-    DefaultYoutube
+const props = defineProps({
+  youtubeUrl: {
+    type: String,
+    default: 'https://www.youtube.com/watch?v=cLKvbhfVBUU'
   },
 
-  props: {
-    youtubeUrl: {
-      type: String,
-      default: 'https://www.youtube.com/watch?v=cLKvbhfVBUU'
-    },
-
-    title: {
-      type: String,
-      default: 'Youtube'
-    },
-
-    autoplay: {
-      type: Boolean,
-      default: false
-    }
+  title: {
+    type: String,
+    default: 'Youtube'
   },
 
-  computed: {
-    youtube() {
-      return {
-        url: this.youtubeUrl,
-        title: this.title,
-        autoplay: this.autoplay
-      };
-    }
+  autoplay: {
+    type: Boolean,
+    default: false
   }
-};
+});
+
+const youtube = computed(() => {
+  return {
+    url: props.youtubeUrl,
+    title: props.title,
+    autoplay: props.autoplay
+  };
+});
 </script>
diff --git a/playground/pages/tests/youtube/index.vue b/playground/pages/tests/youtube/index.vue
index 3a57ce283a..3f94c9c479 100644
--- a/playground/pages/tests/youtube/index.vue
+++ b/playground/pages/tests/youtube/index.vue
@@ -1,12 +1,12 @@
 <template>
-  <main>
+  <div>
     <default
       v-for="(item, index) in items"
       :id="`youtube-${index}`"
       v-bind="item"
       :key="item.youtubeUrl"
       :critical="index < 1" />
-  </main>
+  </div>
 </template>
 
 <script setup>
diff --git a/test/nuxt.config.mjs b/test/nuxt.config.mjs
index bda9a67d2d..d4b063861b 100644
--- a/test/nuxt.config.mjs
+++ b/test/nuxt.config.mjs
@@ -11,8 +11,9 @@ const rootDir = resolver.resolve(`.`);
 export const distDir = join(rootDir, 'dist');
 
 export default defineNuxtConfig(async () => {
+  const defaultConfig = await nuxtConfig();
   return {
-    ...(await nuxtConfig()),
+    ...defaultConfig,
     srcDir: resolver.resolve('../playground'),
     buildDir: join(rootDir, '.nuxt'),
     distDir: resolve(rootDir, 'dist'),
@@ -30,6 +31,11 @@ export default defineNuxtConfig(async () => {
     generate: { cache: false },
     dir: {
       pages: 'pages/tests'
+    },
+
+    speedkit: {
+      ...defaultConfig.speedkit,
+      targetFormats: ['jpg|jpeg|png|gif']
     }
   };
 });
diff --git a/test/tests/browser.mjs b/test/tests/browser.mjs
index 1f6832bd08..f74257f4bc 100644
--- a/test/tests/browser.mjs
+++ b/test/tests/browser.mjs
@@ -113,7 +113,7 @@ export default runtime => {
           .querySelector('.nuxt-speedkit-weak-hardware-overlay button')
           .click()
       );
-      await page.waitForSelector('main.mounted');
+      await page.waitForSelector('div.mounted');
 
       expect(
         await page.evaluate(() =>