Vue.js upgrade to Composition API

Remzi1993 · Sep 6, 2024 · c9f97eb · c9f97eb
1 parent 6e31d7b
commit c9f97eb
Show file tree

Hide file tree

Showing 20 changed files with 852 additions and 611 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -1,3 +1,3 @@
 {
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
-}
+  "recommendations": ["Vue.volar"]
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,29 +1,29 @@
 {
   "name": "remzi-info",
   "private": true,
-  "version": "2.0.0",
+  "version": "3.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
+    "build": "vue-tsc -b && vite build",
     "preview": "vite preview"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
     "@unhead/vue": "^1.10.4",
     "bootstrap": "^5.3.3",
     "bootstrap-icons": "^1.11.3",
-    "vue": "^3.5.0",
+    "vue": "^3.5.3",
     "vue-router": "^4.4.3"
   },
   "devDependencies": {
     "@types/bootstrap": "^5.2.10",
-    "@types/node": "^22.5.2",
+    "@types/node": "^22.5.4",
     "@vitejs/plugin-vue": "^5.1.3",
-    "sass": "^1.77.8",
+    "sass-embedded": "^1.78.0",
     "sass-loader": "^16.0.1",
     "typescript": "^5.5.4",
-    "vite": "^5.4.2",
-    "vue-tsc": "^2.1.4"
+    "vite": "^5.4.3",
+    "vue-tsc": "^2.1.6"
   }
-}
+}
diff --git a/src/App.vue b/src/App.vue
@@ -1,19 +1,10 @@
+<script setup lang="ts">
+import NavBar from '@/NavBar.vue';
+import FooterComp from '@/FooterComp.vue';
+</script>
+
 <template>
   <nav-bar></nav-bar>
   <router-view></router-view>
   <footer-comp></footer-comp>
-</template>
-
-<script lang="ts">
-import {defineComponent} from 'vue'
-import NavBar from '@/NavBar.vue'
-import FooterComp from '@/FooterComp.vue'
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    NavBar,
-    FooterComp
-  }
-})
-</script>
+</template>
diff --git a/src/bootstrap-plugin.ts b/src/bootstrap-plugin.ts
diff --git a/src/components/FooterComp.vue b/src/components/FooterComp.vue
@@ -1,3 +1,6 @@
+<script setup lang="ts">
+</script>
+
 <template>
   <footer class="bg-body-tertiary text-center py-3 d-print-none">
     <div class="container">
@@ -27,14 +30,6 @@
   </footer>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-  name: "FooterComp"
-})
-</script>
-
 <style scoped lang="scss">
 footer {
   position: relative;

diff --git a/src/components/Home.vue b/src/components/Home.vue
@@ -1,3 +1,28 @@
+<script setup lang="ts">
+import { useHead } from '@unhead/vue';
+import Sidebar from '@/Sidebar.vue';
+
+useHead({
+  title: 'Remzi Cavdar',
+  meta: [
+    {
+      name: 'description',
+      content: 'Mijn naam is Remzi Cavdar en ik studeer HBO-ICT Software Engineering aan de Hogeschool van Amsterdam (HvA).'
+    },
+    {
+      name: 'author',
+      content: 'Remzi Cavdar'
+    },
+  ],
+  link: [
+    {
+      rel: 'canonical',
+      href: 'https://remzi.info'
+    }
+  ]
+});
+</script>
+
 <template>
   <main>
     <div class="container">
@@ -81,8 +106,7 @@
           </p>
           <p>
             <strong><i class="bi bi-phone"></i> </strong> <a href="tel:+31611719929">06 117 199 29</a><br>
-            <strong><i class="bi bi-envelope-at"></i> </strong> <a
-              href="mailto:[email protected]">[email protected]</a><br>
+            <strong><i class="bi bi-envelope-at"></i> </strong> <a href="mailto:[email protected]">[email protected]</a><br>
           </p>
         </div>
         <sidebar></sidebar>
@@ -91,37 +115,6 @@
   </main>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-import Sidebar from '@/Sidebar.vue'
-
-export default defineComponent({
-  name: 'Home',
-  components: {Sidebar},
-  head() {
-    return {
-      title: 'Remzi Cavdar',
-      meta: [
-        {
-          name: 'description',
-          content: 'Mijn naam is Remzi Cavdar en ik studeer HBO-ICT Software Engineering aan de Hogeschool van Amsterdam (HvA).'
-        },
-        {
-          name: 'author',
-          content: 'Remzi Cavdar'
-        },
-      ],
-      link: [
-        {
-          name: 'canonical',
-          content: 'https://remzi.info'
-        }
-      ]
-    }
-  }
-})
-</script>
-
 <style lang="scss" scoped>
 svg {
   max-width: 24px;

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
@@ -1,3 +1,60 @@
+<script setup lang="ts">
+import {ref, onMounted, onBeforeUnmount, watch} from 'vue';
+import {useRoute, useRouter} from 'vue-router';
+import {Dropdown, Collapse} from 'bootstrap';
+
+const isDropdownActive = ref(false);
+const dropdownMenu = ref<HTMLElement | null>(null);
+const bsCollapse = ref<Collapse | null>(null);
+
+const route = useRoute();
+const router = useRouter();
+
+const closeDropdown = () => {
+  if (!dropdownMenu.value) return;
+  const dropdownElement = dropdownMenu.value.querySelector('.dropdown-toggle');
+  if (dropdownElement) {
+    const bsDropdownInstance = new Dropdown(dropdownElement);
+    bsDropdownInstance.hide();
+  }
+};
+
+watch(
+    () => route.path,
+    (to) => {
+      const dropdownUrlRoutePattern = /^\/sublinks\//;
+      isDropdownActive.value = dropdownUrlRoutePattern.test(to);
+    },
+    {immediate: true}
+);
+
+const unwatchRouter = router.afterEach(() => {
+  closeDropdown();
+});
+
+onMounted(() => {
+  const menuToggle = document.querySelector('#navbarCollapse') as HTMLElement;
+  if (menuToggle) {
+    bsCollapse.value = new Collapse(menuToggle, {toggle: false});
+    const navLinks = document.querySelectorAll('.navbar-brand, .nav-item:not(.dropdown), .dropdown-item');
+
+    navLinks.forEach(link => {
+      link.addEventListener('click', () => {
+        if (window.innerWidth <= 992 && menuToggle.classList.contains('show')) {
+          bsCollapse.value?.hide();
+        }
+      });
+    });
+  } else {
+    console.error('Element #navbarCollapse not found');
+  }
+});
+
+onBeforeUnmount(() => {
+  if (unwatchRouter) unwatchRouter();
+});
+</script>
+
 <template>
   <div class="topbar fixed-top d-print-none">
     <div class="container d-flex justify-content-center align-items-center">
@@ -36,77 +93,6 @@
   </nav>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-import {Dropdown, Collapse} from 'bootstrap'
-
-export default defineComponent({
-  name: 'NavBar',
-  data() {
-    return {
-      isDropdownActive: false
-    };
-  },
-  watch: {
-    '$route': {
-      immediate: true,
-      handler: function (to) {
-        const dropdownUrlRoutePattern = /^\/sublinks\//; // This matches any path that starts with '/sublinks/'
-        this.isDropdownActive = dropdownUrlRoutePattern.test(to.path);
-      }
-    }
-  },
-  created() {
-    // Close the dropdown menu when route changes
-    // @ts-ignore
-    this.unwatchRouter = this.$router.afterEach(() => {
-      this.closeDropdown();
-    });
-  },
-  beforeUnmount() {
-    // Cleanup the router watch
-    // @ts-ignore
-    if (this.unwatchRouter) {
-      // @ts-ignore
-      this.unwatchRouter();
-    }
-  },
-  mounted() {
-    const menuToggle = document.querySelector('#navbarCollapse')
-    if (menuToggle) {
-      // @ts-ignore
-      const bsCollapse = new Collapse(menuToggle, {toggle: false}); // Initialize without toggling
-      const navLinks = document.querySelectorAll('.navbar-brand, .nav-item:not(.dropdown), .dropdown-item');
-
-      navLinks.forEach(link => {
-        link.addEventListener('click', () => {
-          // Check if the viewport width is less than or equal to 992px and if the menu is open
-          // @ts-ignore
-          if (window.innerWidth <= 992 && menuToggle.classList.contains('show')) {
-            bsCollapse.hide();
-          }
-        });
-      });
-    } else {
-      console.error('Element #navbarCollapse not found');
-    }
-  },
-  methods: {
-    closeDropdown() {
-      if (!this.$refs.dropdownMenu) {
-        return;
-      }
-      // @ts-ignore
-      const dropdownElement = this.$refs.dropdownMenu.querySelector('.dropdown-toggle');
-      if (dropdownElement) {
-        const bsDropdownInstance = new Dropdown(dropdownElement);
-        bsDropdownInstance.hide();
-      }
-    }
-  }
-})
-</script>
-
 <style lang="scss" scoped>
 .topbar {
   background-color: #B22222;

diff --git a/src/components/NotFound.vue b/src/components/NotFound.vue
@@ -1,18 +1,22 @@
+<script setup lang="ts">
+</script>
+
 <template>
   <main>
     <div class="container">
       <div class="row">
         <div class="col">
           <div class="d-flex align-items-center justify-content-center pt-xl-5">
             <div class="d-flex flex-column align-items-center text-center">
-              <h1 class="display-1 fw-bold">Pagina niet gevonden <img src="../assets/img/emoji/dizzy-face.webp" alt="😵"
-                                                                      width="64" height="64"></h1>
-              <p class="fs-3"><span class="text-danger">Oepsie!</span> Pagina is nergens te bekennen
+              <h1 class="display-1 fw-bold">Pagina niet gevonden
+                <img src="../assets/img/emoji/dizzy-face.webp" alt="😵" width="64" height="64">
+              </h1>
+              <p class="fs-3">
+                <span class="text-danger">Oepsie!</span> Pagina is nergens te bekennen
                 <img src="../assets/img/emoji/grin-sweat.webp" alt="😅" width="32" height="32">
               </p>
               <p class="lead d-flex justify-content-center">
-                Mischien is het een tijdelijke storing, of is de pagina verplaatst. Altijd een goed idee om terug naar
-                het begin te gaan.
+                Misschien is het een tijdelijke storing, of is de pagina verplaatst. Altijd een goed idee om terug naar het begin te gaan.
               </p>
               <router-link class="btn btn-primary" to="/">Terug naar home</router-link>
             </div>
@@ -23,18 +27,11 @@
   </main>
 </template>
 
-<script lang="ts">
-import {defineComponent} from 'vue'
-
-export default defineComponent({
-  name: 'NotFound'
-})
-</script>
-
 <style lang="scss" scoped>
 .lead {
   max-width: 650px;
 }
+
 @media (min-width: 576px) {
   main {
     padding-bottom: 200px;