feat: migrate frontend to Nuxt 4 and Vue 3

Author: Sebastian Fellner 💯

.eslintrc.yml

@@ -13,4 +13,12 @@ parserOptions:
   sourceType: module
 plugins:
   - vue
+globals:
+  defineI18nConfig: readonly
+  defineNuxtConfig: readonly
+  defineNuxtPlugin: readonly
+  queryCollection: readonly
+  useAsyncData: readonly
+  useRuntimeConfig: readonly
+  useSeoMeta: readonly
 rules: {}

.gitignore

@@ -73,6 +73,8 @@ typings/
 
 # nuxt.js build output
 .nuxt
+.data
+.output
 
 # Nuxt generate
 dist

.prettierignore

@@ -4,10 +4,13 @@ dist
 node_modules
 coverage
 pnpm-lock.yaml
+playwright-report
+test-results
 test/*
 static/sw.js
 .direnv
 .idea
 .nuxt
+.output
 node_modules
 nuxt.config.js

assets/_theme-variables.scss

@@ -0,0 +1,42 @@
+// Whatsapp theme colors
+$whatsappThemeColor: #07bc4c;
+$darkBackgroundColor: #0d1418;
+$lightBackgroundColor: #e5ddd5;
+
+// Monotone colors
+$c-dark: #022e40;
+$c-dark-accent: #032859;
+$c-white: #f2f2f2;
+$c-white-dark: #bfbfbf;
+$c-white-accent: #e1e1e1;
+
+// Blue colors
+$c-blue-accent: #21a68d;
+$c-blue-accent-light: #60d8bd;
+$c-blue-accent-dark: #227373;
+$c-blue-secondary: #0c808c;
+$c-blue-secondary-light: #51b0bc;
+$c-blue-secondary-dark: #00535f;
+$c-blue-dark: #11538c;
+
+// Green colors
+$c-green: #88a825;
+$c-green-accent: #b3f94f;
+
+// Yellow colors
+$c-yellow: #ffd45c;
+$c-yellow-accent: #ffa35c;
+$c-yellow-bright: #ffd800;
+$c-yellow-bright-accent: #fd9924;
+
+// Orange colors
+$c-orange: #fe6a2c;
+$c-orange-accent: #ffbf5c;
+$c-orange-dark: #cf4a30;
+$c-orange-dark-accent: #ed8c2b;
+
+// Red colors
+$c-red: #ff675c;
+$c-red-light: #ff855c;
+$c-red-dark: #d93b3b;
+$c-red-dark-accent: #911146;

assets/variables.scss

@@ -1,54 +1,4 @@
-// ---- COLORS -----
-
-// Whatsapp Theme color
-$whatsappThemeColor: #07bc4c;
-$darkBackgroundColor: #0d1418;
-$lightBackgroundColor: #e5ddd5;
-
-// MONOTONE
-// -- dark colors
-$c-dark: #022e40;
-$c-dark-accent: #032859;
-
-// -- light colors
-$c-white: #f2f2f2;
-$c-white-dark: #bfbfbf;
-$c-white-accent: #e1e1e1;
-
-// BLUE
-$c-blue-accent: #21a68d;
-$c-blue-accent-light: #60d8bd;
-$c-blue-accent-dark: #007660;
-
-$c-blue-secondary: #0c808c;
-$c-blue-secondary-light: #51b0bc;
-$c-blue-secondary-dark: #00535f;
-
-$c-blue-dark: #11538c;
-$c-blue-accent-dark: #227373;
-
-// WHITE
-$c-green: #88a825;
-$c-green-accent: #b3f94f;
-
-// YELLOW
-$c-yellow: #ffd45c;
-$c-yellow-accent: #ffa35c;
-
-$c-yellow-bright: #ffd800;
-$c-yellow-bright-accent: #fd9924;
-
-// ORANGE
-$c-orange: #fe6a2c;
-$c-orange-accent: #ffbf5c;
-$c-orange-dark: #cf4a30;
-$c-orange-dark-accent: #ed8c2b;
-
-// RED
-$c-red: #ff675c;
-$c-red-light: #ff855c;
-$c-red-dark: #d93b3b;
-$c-red-dark-accent: #911146;
+@use "theme-variables" as *;
 
 .top-color {
   background-color: $c-blue-accent;
@@ -58,8 +8,6 @@ $c-red-dark-accent: #911146;
   display: none;
 }
 
-@import "~vuetify/src/styles/styles.sass";
-
 .cta {
   background: $c-white;
   width: 100%;

components/About.vue

@@ -57,42 +57,38 @@
 </template>
 
 <script>
+import adrianImage from "~/assets/img/us/Adrian_WA.jpg";
+import moritzImage from "~/assets/img/us/Moritz_WA.jpeg";
+import paulImage from "~/assets/img/us/Paul_WA.jpg";
+import sebastianImage from "~/assets/img/us/Sebastian_WA.jpg";
+import osloLogo from "~/assets/img/uni/Oslo_Logo.png";
+import otagoLogo from "~/assets/img/uni/Otago_Logo.png";
+import stockholmLogo from "~/assets/img/uni/Stockholm_Logo.png";
+import tumLogo from "~/assets/img/uni/TUM_Logo.png";
+
 export default {
   name: "About",
   data() {
     return {
-      universities: [
-        // eslint-disable-next-line no-undef
-        require("~/assets/img/uni/TUM_Logo.png"),
-        // eslint-disable-next-line no-undef
-        require("~/assets/img/uni/Oslo_Logo.png"),
-        // eslint-disable-next-line no-undef
-        require("~/assets/img/uni/Otago_Logo.png"),
-        // eslint-disable-next-line no-undef
-        require("~/assets/img/uni/Stockholm_Logo.png"),
-      ],
+      universities: [tumLogo, osloLogo, otagoLogo, stockholmLogo],
       persons: [
         {
-          // eslint-disable-next-line no-undef
-          image: require("~/assets/img/us/Sebastian_WA.jpg"),
+          image: sebastianImage,
           name: "Sebastian Fellner",
           description: ["Computer Science MSc", "AI Enthusiast"],
         },
         {
-          // eslint-disable-next-line no-undef
-          image: require("~/assets/img/us/Paul_WA.jpg"),
+          image: paulImage,
           name: "Paul Kehnel",
           description: ["Computer Science  MSc", "Bicycle Dude"],
         },
         {
-          // eslint-disable-next-line no-undef
-          image: require("~/assets/img/us/Adrian_WA.jpg"),
+          image: adrianImage,
           name: "Adrian Thiesen",
           description: ["Information Systems BSc", "The Product Enthusiast"],
         },
         {
-          // eslint-disable-next-line no-undef
-          image: require("~/assets/img/us/Moritz_WA.jpeg"),
+          image: moritzImage,
           name: "Moritz Wolf",
           description: ["Robotics MSc", "Outdoor Specialist"],
         },

components/ArrowDown.vue

@@ -13,12 +13,14 @@
 </template>
 
 <script>
+import { scrollTo } from "~/utils/scroll";
+
 export default {
   name: "ArrowDown",
   props: { animate: { default: false, type: Boolean } },
   methods: {
     goToExportExplainer() {
-      this.$vuetify.goTo(".exportexplainer", { duration: 300 });
+      scrollTo(".exportexplainer");
     },
   },
 };

components/ChatVisualization/Payment.vue

@@ -22,27 +22,29 @@ export default {
   data() {
     return {};
   },
-  head() {
-    return {
-      script: [
-        {
-          hid: "paypal",
-          src:
-            "https://www.paypal.com/sdk/js?currency=" +
-            this.currency +
-            "&client-id=" +
-            // eslint-disable-next-line no-undef
-            this.$config.paypalClientId,
-          defer: true,
-          // Changed after script load
-          callback: () => {
-            this.initPayPalButton(this);
-          },
-        },
-      ],
-    };
+  mounted() {
+    this.loadPayPalScript();
   },
   methods: {
+    loadPayPalScript() {
+      if (window.paypal) {
+        this.initPayPalButton(this);
+        return;
+      }
+
+      const script = document.createElement("script");
+      script.id = "paypal-sdk";
+      script.src =
+        "https://www.paypal.com/sdk/js?currency=" +
+        this.currency +
+        "&client-id=" +
+        this.$config.paypalClientId;
+      script.defer = true;
+      script.addEventListener("load", () => this.initPayPalButton(this), {
+        once: true,
+      });
+      document.head.appendChild(script);
+    },
     initPayPalButton(context) {
       // eslint-disable-next-line no-undef
       paypal

components/ChatVisualization/PdfDownloadPopup.vue

@@ -8,11 +8,7 @@
     ></div>
 
     <v-row>
-      <v-img
-        :src="require('static/pdf-example.jpg')"
-        class="ma-auto my-4"
-        max-width="100%"
-      />
+      <v-img src="/pdf-example.jpg" class="ma-auto my-4" max-width="100%" />
     </v-row>
     <!-- Loading section -->
     <v-row v-show="isLoading" class="ma-3">
@@ -185,7 +181,7 @@
 <!-- eslint-enable vue/no-v-html -->
 <script>
 import { GTAG_PAYMENT, GTAG_PDF, gtagEvent } from "~/utils/gtagValues";
-import PDFWorker from "worker-loader!~/assets/js/pdf.worker.js";
+import PDFWorker from "~/assets/js/pdf.worker.js?worker";
 import { loadImage, objectToDictionary } from "~/utils/utils";
 import { saveAs } from "file-saver";
 import SubscriptionChecker from "~/components/SubscriptionChecker.vue";

components/Content.vue

@@ -4,23 +4,28 @@
       {{ page.title }}
     </div>
     <!-- toc -->
-    <div class="toc" v-if="page.toc">
+    <div v-if="toc.length" class="toc">
       <ol>
-        <li v-for="heading in page.toc" :key="heading.id">
+        <li v-for="heading in toc" :key="heading.id">
           <a :href="'#' + heading.id">
             {{ heading.text }}
           </a>
         </li>
       </ol>
     </div>
     <!-- main content -->
-    <nuxt-content :document="page" />
+    <ContentRenderer class="nuxt-content" :value="page" />
   </article>
 </template>
 
 <script>
 export default {
   props: ["page"],
+  computed: {
+    toc() {
+      return this.page.body?.toc?.links || this.page.toc || [];
+    },
+  },
 };
 </script>