fix: update docs to nuxt 3

Author: hunterliu1003

docs/app.config.ts

@@ -5,7 +5,6 @@ export default defineAppConfig({
     layout: 'docs',
     image: 'https://vue-final-modal.org/preview.png',
     url: 'https://vue-final-modal.org',
-    debug: false,
     socials: {
       twitter: '@hunterliu1003',
       github: 'vue-final/vue-final-modal',
@@ -15,7 +14,6 @@ export default defineAppConfig({
       level: 1,
     },
     header: {
-      title: false,
       logo: true,
     },
     footer: {},

docs/components/content/CodeBlockFile.vue

@@ -1,7 +1,17 @@
-<script setup lang="ts">
-const colorMode = useColorMode()
-</script>
-
 <template>
-  <img :src="`/logo-${colorMode.value}.png`" alt="Vue Final Modal Logo" width="220" height="40">
+  <div class="logo"></div>
 </template>
+
+<style>
+.logo {
+  width: 220px;
+  height: 40px;
+}
+.dark .logo {
+  background-image: url('/logo-dark.svg');
+}
+
+.light .logo {
+  background-image: url('/logo-light.svg');
+}
+</style>

docs/components/content/Logo.vue

@@ -13,6 +13,7 @@ cta:
 secondary:
   - Star on GitHub
   - https://github.com/vue-final/vue-final-modal
+snippet: npm install vue-final-modal@rc
 ---
 
 #title

docs/components/content/Navbar.vue

@@ -10,6 +10,6 @@ head.title: 'Playground | Examples'
   ::
 
   ::code-block{label="Preview.vue"}
-    :code-block-file{path="./Playground.vue" language="vue"}
+    <!-- :code-block-file{path="./Playground.vue" language="vue"} -->
   ::
 ::

docs/content/1.index.md

@@ -10,7 +10,7 @@ Create a `<ConfirmModal>` component with `<VueFinalModal>` and TailwindCSS.
 
 ::code-group
   ::code-block{label="ConfirmModal.vue"}
-    :code-block-file{path="./ConfirmModal.vue" language="vue"}
+    <!-- :code-block-file{path="./ConfirmModal.vue" language="vue"} -->
   ::
 ::
 
@@ -22,6 +22,6 @@ Create a `<ConfirmModal>` component with `<VueFinalModal>` and TailwindCSS.
   ::
 
   ::code-block{label="Preview.vue"}
-    :code-block-file{path="./ConfirmModalPreview.vue" language="vue"}
+    <!-- :code-block-file{path="./ConfirmModalPreview.vue" language="vue"} -->
   ::
 ::

docs/content/4.use-cases/1.playground.md

@@ -14,15 +14,15 @@ This example use [Vorms](https://vorms.mini-ghost.dev/) to handle the form valid
 
 ::code-group
   ::code-block{label="LoginFormModal.vue"}
-    :code-block-file{path="./LoginFormModal.vue" language="vue"}
+    <!-- :code-block-file{path="./LoginFormModal.vue" language="vue"} -->
   ::
 ::
 
 ## `<LoginForm>` component
 
 ::code-group
   ::code-block{label="LoginForm.vue"}
-    :code-block-file{path="./LoginForm.vue" language="vue"}
+    <!-- :code-block-file{path="./LoginForm.vue" language="vue"} -->
   ::
 ::
 
@@ -34,6 +34,6 @@ This example use [Vorms](https://vorms.mini-ghost.dev/) to handle the form valid
   ::
 
   ::code-block{label="Preview.vue"}
-    :code-block-file{path="./LoginFormModalPreview.vue" language="vue"}
+    <!-- :code-block-file{path="./LoginFormModalPreview.vue" language="vue"} -->
   ::
 ::

docs/content/4.use-cases/3.confirm-modal.md

@@ -10,7 +10,7 @@ Use `<ConfirmModal>` to demo how to use nested modal.
 
 ::code-group
   ::code-block{label="ConfirmModal.vue"}
-    :code-block-file{path="./ConfirmModal.vue" language="vue"}
+    <!-- :code-block-file{path="./ConfirmModal.vue" language="vue"} -->
   ::
 ::
 
@@ -22,6 +22,6 @@ Use `<ConfirmModal>` to demo how to use nested modal.
   ::
 
   ::code-block{label="NestedModalPreview.vue"}
-    :code-block-file{path="./NestedModalPreview.vue" language="vue"}
+    <!-- :code-block-file{path="./NestedModalPreview.vue" language="vue"} -->
   ::
 ::

docs/content/4.use-cases/4.login-form-modal.md

@@ -10,7 +10,7 @@ Create a `<Fullscreen>` component with `<ModalFullscreen>` and TailwindCSS.
 
 ::code-group
   ::code-block{label="Fullscreen.vue"}
-    :code-block-file{path="./Fullscreen.vue" language="vue"}
+    <!-- :code-block-file{path="./Fullscreen.vue" language="vue"} -->
   ::
 ::
 
@@ -23,6 +23,6 @@ Create a `<Fullscreen>` component with `<ModalFullscreen>` and TailwindCSS.
   ::
 
   ::code-block{label="FullscreenPreview.vue"}
-    :code-block-file{path="./FullscreenPreview.vue" language="vue"}
+    <!-- :code-block-file{path="./FullscreenPreview.vue" language="vue"} -->
   ::
 ::