fix without nuxt 3.12

components/Highlight.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="bg-gray">
+    <main class="isolate">
+      <!-- Hero section -->
+      <div
+        class="relative isolate -z-10 overflow-hidden bg-gradient-to-b from-indigo-100/20 pt-14">
+        <!-- <div
+          class="absolute inset-y-0 right-1/2 -z-10 -mr-96 w-[200%] origin-top-right skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:-mr-80 lg:-mr-96"
+          aria-hidden="true" /> -->
+        <div
+          class="absolute inset-y-0 right-1/2 -z-10 -mr-96 w-[200%] origin-top-right skew-x-[-30deg] bg-gray-900 shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 sm:-mr-80 lg:-mr-96"
+          aria-hidden="true" />
+        <div class="mx-auto max-w-7xl px-6 py-32 sm:py-40 lg:px-8">
+          <div
+            class="mx-auto max-w-2xl lg:mx-0 lg:grid lg:max-w-none lg:grid-cols-2 lg:gap-x-16 lg:gap-y-6 xl:grid-cols-1 xl:grid-rows-1 xl:gap-x-8">
+            <h1
+              class="max-w-2xl text-4xl font-bold tracking-tight text-gray-100 sm:text-6xl lg:col-span-2 xl:col-auto">
+              We’re a passionate group of people working from around the world
+              to build the future of ecommerce.
+            </h1>
+            <div class="mt-6 max-w-xl lg:mt-0 xl:col-end-1 xl:row-start-1">
+              <p class="text-lg leading-8 text-gray-400">
+                Anim aute id magna aliqua ad ad non deserunt sunt. Qui irure qui
+                lorem cupidatat commodo. Elit sunt amet fugiat veniam occaecat
+                fugiat aliqua. Anim aute id magna aliqua ad ad non deserunt
+                sunt. Qui irure qui lorem cupidatat commodo.
+              </p>
+            </div>
+
+            <video
+              class="mt-10 aspect-[6/5] w-full max-w-lg rounded-2xl object-cover sm:mt-16 lg:mt-0 lg:max-w-none xl:row-span-2 xl:row-end-2 xl:mt-36"
+              controls>
+              <source
+                src="https://docs.material-tailwind.com/demo.mp4"
+                type="video/mp4" />
+              Your browser does not support the video tag.
+            </video>
+          </div>
+        </div>
+        <div
+          class="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-grey-100 sm:h-32" />
+      </div>
+    </main>
+  </div>
+</template>
+
+<script setup>
+  import { defineComponent, h, ref } from 'vue';
+  import { Dialog, DialogPanel } from '@headlessui/vue';
+  import { Bars3Icon, XMarkIcon } from '@heroicons/vue/24/outline';
+
+  const mobileMenuOpen = ref(false);
+</script>