updated App.vue to use new <script setup lang="ts"> syntax

.eslintrc.cjs

@@ -10,6 +10,6 @@ module.exports = {
     "@vue/eslint-config-prettier"
   ],
   "env": {
-    "vue/setup-compiler-macros": true
+    "vue/setup-compiler-macros": true,
   }
 }

package.json

@@ -29,6 +29,7 @@
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.1.1",
+    "@types/luxon": "^2.3.1",
     "@types/node": "^16.11.26",
     "@vitejs/plugin-vue": "^2.2.4",
     "@vue/eslint-config-prettier": "^7.0.0",
@@ -40,7 +41,7 @@
     "sass": "^1.49.9",
     "typescript": "~4.6.2",
     "vite": "^2.8.6",
-    "vue-tsc": "^0.33.2-patch.1"
+    "vue-tsc": "^0.33.2"
   },
   "packageManager": "yarn@3.2.0"
 }

src/App.vue

@@ -14,40 +14,33 @@
   <CookieConsentBtn id="cookie-btn" />
 </template>
 
-<script>
+<script setup lang="ts">
-import Nav from "/src/components/NavComponent.vue";
+import Nav from "@/components/NavComponent.vue";
-import Footer from "/src/components/FooterComponent.vue";
+import Footer from "@/components/FooterComponent.vue";
-import CookieConsentBtn from "/src/components/CookieConsentBtn.vue";
+import CookieConsentBtn from "@/components/CookieConsentBtn.vue";
 import { onMounted, ref } from "vue";
-import InfoModal from "/src/components/InfoModal.vue";
+import InfoModal from "@/components/InfoModal.vue";
 
-export default {
+const offset = ref(0);
-  components: { InfoModal, Footer, Nav, CookieConsentBtn },
-  setup() {
-    const offset = ref(0);
 
-    const setOffset = () => {
+const setOffset = () => {
-      return document.getElementsByTagName("nav")[0].clientHeight;
+  return document.getElementsByTagName("nav")[0].clientHeight;
-    };
-
-    const setBgHeight = () => {
-      document.querySelector(".bg-img").style.height =
-        document.documentElement.clientHeight + "px";
-    };
-
-    window.onresize = () => {
-      offset.value = setOffset();
-      setBgHeight();
-    };
-
-    onMounted(() => {
-      offset.value = setOffset();
-      setBgHeight();
-    });
-
-    return { offset };
-  },
 };
+
+const setBgHeight = () => {
+  const bgImg = document.querySelector(".bg-img") as HTMLImageElement;
+  bgImg.style.height = document.documentElement.clientHeight + "px" || "0px";
+};
+
+window.onresize = () => {
+  offset.value = setOffset();
+  setBgHeight();
+};
+
+onMounted(() => {
+  offset.value = setOffset();
+  setBgHeight();
+});
 </script>
 
 <style lang="scss">

yarn.lock

@@ -148,6 +148,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/luxon@npm:^2.3.1":
+  version: 2.3.1
+  resolution: "@types/luxon@npm:2.3.1"
+  checksum: e75928929aaf4e8796dcbdccd23a2dda029f637db01f5b06c7a72033ae106966df716e179ee41711280d782bd851228810643bce9bffc4ff62ae906e94ee1df2
+  languageName: node
+  linkType: hard
+
 "@types/node@npm:^16.11.26":
   version: 16.11.26
   resolution: "@types/node@npm:16.11.26"
@@ -890,6 +897,7 @@ __metadata:
   dependencies:
     "@popperjs/core": ^2.11.4
     "@rushstack/eslint-patch": ^1.1.1
+    "@types/luxon": ^2.3.1
     "@types/node": ^16.11.26
     "@vitejs/plugin-vue": ^2.2.4
     "@vue/eslint-config-prettier": ^7.0.0
@@ -915,7 +923,7 @@ __metadata:
     vue: ^3.2.31
     vue-matomo: ^4.1.0
     vue-router: ^4.0.14
-    vue-tsc: ^0.33.2-patch.1
+    vue-tsc: ^0.33.2
     vue3-cookies: ^1.0.6
     vuex: ^4.0.2
   languageName: unknown
@@ -3051,7 +3059,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-tsc@npm:^0.33.2-patch.1":
+"vue-tsc@npm:^0.33.2":
   version: 0.33.2
   resolution: "vue-tsc@npm:0.33.2"
   dependencies: