Watch route changes for feedback properly

.vitepress/theme/components/Feedback.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { reactive, ref } from "vue";
-import { useRoute } from "vitepress";
+import { useRouter } from "vitepress";
 import { type FeedbackType, getFeedbackOption, feedbackOptions } from "../../types/Feedback";
 
 const loading = ref<boolean>(false);
 const error = ref<unknown>(null);
 const success = ref<boolean>(false);
-const { path } = useRoute();
+
+const router = useRouter();
 
 const feedback = reactive<FeedbackType>({ message: "", contact: "" });
 
@@ -18,7 +19,7 @@ async function handleSubmit(type?: FeedbackType["type"]) {
     message: feedback.message,
     type: feedback.type,
     contact: feedback.contact,
-    page: path,
+    page: router.route.path,
   };
 
   try {
@@ -68,7 +69,7 @@ async function handleSubmit(type?: FeedbackType["type"]) {
       </div>
       <div v-else-if="feedback.type && !success" class="step">
         <div>
-          <p class="desc">The wiki is... • {{ path }}</p>
+          <p class="desc">Page: {{ router.route.path }}</p>
           <div>
             <span>{{ getFeedbackOption(feedback.type)?.label }}</span>
             <button style="margin-left: 0.5rem" class="btn" @click="feedback.type = undefined">
@@ -84,8 +85,8 @@ async function handleSubmit(type?: FeedbackType["type"]) {
           class="btn btn-primary"
           :disabled="
             feedback.message.length < 5 ||
-            feedback.message.length > 1000 ||
-            feedback.contact.length > 100
+              || feedback.message.length > 1000
+              || feedback.contact.length > 100
           "
           @click="handleSubmit()">
           Submit

.vitepress/types/Feedback.ts

@@ -4,7 +4,7 @@ export const FeedbackSchema = z.object({
   message: z.string().min(5).max(1000),
   type: z.enum(["bug", "suggestion", "appreciate", "other"]),
   contact: z.string().optional(),
-  page: z.string().min(3).max(10),
+  page: z.string().optional(),
 });
 
 export const feedbackOptions = [

.vitepress/vue-shim.d.ts

@@ -1,6 +1,5 @@
-import { type Component } from "vue";
-
+/* eslint-disable ts/consistent-type-imports */
 declare module "*.vue" {
-  const component: Component;
+  const component: import("vue").Component;
   export default component;
 }