Vue 3 upgrade

package.json

@@ -4,7 +4,7 @@
   "private": true,
   "type": "module",
   "engines": {
-    "node": "^20.19.0 || >=22.12.0"
+    "node": "^24 || >=22.12.0"
   },
   "scripts": {
     "dev": "vite",

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="app" :class="darkClass">
-    <Challenges
+    <router-view
       @closeToolbar="toggleOptions"
       @previewOff="previewOff"
       @previewOn="previewOn"
@@ -23,15 +23,12 @@
 
 <script>
 import { ref, onMounted } from "vue"
-import Challenges from "./components/Challenges.vue"
 
 export default {
   name: "App",
-  components: {
-    Challenges,
-  },
+  components: {},
   setup() {
-    const dribdatApi = ref(null);
+    const dribdatApi = ref("/datapackage.json");
     const dribdatHome = ref("#top");
     const dribdatDribs = ref("");
     const voteUrl = ref("");
@@ -82,7 +79,7 @@ export default {
         baseUrl = baseUrl.substring(0, baseUrl.indexOf("/event/"));
       }
     } else if (baseUrl == null) {
-      baseUrl = "./datapackage.json";
+      baseUrl = "/datapackage.json";
     }
     if (baseUrl.endsWith("datapackage.json")) {
       apiUrl = baseUrl;

src/components/Challenges.vue

@@ -172,7 +172,8 @@
 </template>
 
 <script>
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted, computed, watch } from "vue";
+import { useRouter } from "vue-router";
 import moment from "moment";
 import Header from "./Header.vue";
 import Footer from "./Footer.vue";
@@ -187,6 +188,7 @@ export default {
     dribs: String,
     options: String,
     toolbar: Boolean,
+    id: String,
   },
   components: {
     Countdown,
@@ -196,6 +198,7 @@ export default {
     Footer,
   },
   setup(props, { emit }) {
+    const router = useRouter();
     const event = ref({});
     const projects = ref(null);
     const activities = ref(null);
@@ -246,7 +249,7 @@ export default {
     };
 
     const seeDetails = (project) => {
-      window.open(project.url);
+      router.push({ name: 'Project', params: { id: project.id } });
     };
 
     const changeDark = () => {
@@ -456,6 +459,17 @@ export default {
         });
     });
 
+    watch(projects, (newProjects) => {
+      if (props.id && newProjects && newProjects.length > 0) {
+        const project = newProjects.find(p => p.id == props.id);
+        if (project) {
+          activePreview.value = project.id;
+          isPreviews.value = true;
+          emit("previewOn");
+        }
+      }
+    });
+
     return {
       event,
       projects,

src/router/index.js

@@ -1,8 +1,21 @@
 import { createRouter, createWebHistory } from 'vue-router'
-
+import Challenges from '../components/Challenges.vue'
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [],
+  routes: [
+    {
+      path: '/',
+      name: 'Challenges',
+      component: Challenges,
+      props: true,
+    },
+    {
+      path: '/project/:id',
+      name: 'Project',
+      component: Challenges,
+      props: true,
+    },
+  ],
 })
 
 export default router