Migrate to Nuxt3 and Refactor to Composition API

.gitignore

@@ -1,90 +1,24 @@
-# Created by .ignore support plugin (hsz.mobi)
-### Node template
-# Logs
-/logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# TypeScript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-
-# next.js build output
-.next
-
-# nuxt.js build output
+# Nuxt dev/build outputs
+.output
+.data
 .nuxt
-
-# Nuxt generate
+.nitro
+.cache
 dist
 
-# vuepress build output
-.vuepress/dist
-
-# Serverless directories
-.serverless
-
-# IDE / Editor
-.idea
+# Node dependencies
+node_modules
 
-# Service worker
-sw.*
+# Logs
+logs
+*.log
 
-# macOS
+# Misc
 .DS_Store
+.fleet
+.idea
 
-# Vim swap files
-*.swp
+# Local env files
+.env
+.env.*
+!.env.example

app.vue

@@ -0,0 +1,5 @@
+<template>
+  <NuxtLayout>
+    <NuxtPage/>
+  </NuxtLayout>
+</template>

components/BackToTop.vue

@@ -1,40 +1,32 @@
-<script>
+<script setup>
 import feather from "feather-icons";
 
-export default {
-  components: {},
-  data() {
-    return {
-      userScrollPosition: 0,
-    };
-  },
-  computed: {
-    isScrolled() {
-      return this.userScrollPosition > 100;
-    },
-  },
-  mounted() {
-    window.addEventListener("scroll", this.updateScrollPosition);
-    feather.replace();
-  },
-  updated() {
-    feather.replace();
-  },
-  beforeDestroy() {
-    window.removeEventListener("scroll", this.updateScrollPosition);
-  },
-  methods: {
-    updateScrollPosition() {
-      this.userScrollPosition = window.scrollY;
-    },
-    backToTop() {
-      window.scrollTo({
-        top: 0,
-        behavior: "smooth",
-      });
-    },
-  },
-};
+const userScrollPosition = ref(0);
+const isScrolled = computed(() => userScrollPosition.value > 100);
+
+function updateScrollPosition() {
+  userScrollPosition.value = window.scrollY;
+}
+
+function backToTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+}
+
+onMounted(() => {
+  window.addEventListener("scroll", updateScrollPosition);
+  feather.replace();
+});
+
+onBeforeUnmount(() => {
+  window.removeEventListener("scroll", updateScrollPosition);
+});
+
+onUpdated(() => {
+  feather.replace();
+});
 </script>
 
 <template>

components/HireMeModal.vue

@@ -1,19 +1,25 @@
-<script>
+<script setup>
 import feather from "feather-icons";
 import Button from "./reusable/Button.vue";
-export default {
-  props: ["showModal", "modal", "categories"],
-  components: { Button },
-  data: () => {
-    return {
-      // @todo
-    };
+
+defineProps({
+  showModal: {
+    type: Function,
+    required: true
   },
-  mounted() {
-    feather.replace();
+  modal: {
+    type: Boolean,
+    required: true
   },
-  methods: {},
-};
+  categories: {
+    type: Array,
+    required: true
+  }
+});
+
+onMounted(() => {
+  feather.replace();
+});
 </script>
 
 <template>
@@ -146,7 +152,6 @@ export default {
                       "
                       id="subject"
                       name="subject"
-                      type="text"
                       required=""
                       aria-label="Project Category"
                     >

components/about/AboutClientSingle.vue

@@ -1,12 +1,10 @@
-<script>
-export default {
-  props: ["client"],
-  data: () => {
-    return {
-      // @todo
-    };
+<script setup>
+defineProps({
+  client: {
+    type: Object,
+    required: true,
   },
-};
+});
 </script>
 
 <template>

components/about/AboutClients.vue

@@ -1,15 +1,10 @@
-<script>
-import { mapState } from "vuex";
-export default {
-  data: () => {
-    return {
-      // @todo
-    };
-  },
-  computed: {
-    ...mapState(["clientsHeading", "clients"]),
-  },
-};
+<script setup>
+import { useMainStore } from "~/store/index";
+import AboutClientSingle from "./AboutClientSingle.vue";
+
+const mainStore = useMainStore();
+const clientsHeading = computed(() => mainStore.clientsHeading);
+const clients = computed(() => mainStore.clients);
 </script>
 
 <template>

components/about/AboutCounter.vue

@@ -1,12 +1,4 @@
-<script>
-export default {
-  data: () => {
-    return {
-      // @todo
-    };
-  },
-};
-</script>
+<script setup></script>
 
 <template>
   <div class="mt-10 sm:mt-20 bg-primary-light dark:bg-ternary-dark shadow-sm">

components/about/AboutMe.vue

@@ -1,23 +1,15 @@
-<script>
-import { mapState } from "vuex";
+<script setup>
+import { useMainStore } from "~/store/index";
 
-export default {
-  data: () => {
-    return {
-      // @todo
-    };
-  },
-  computed: {
-    ...mapState(["aboutMe"]),
-  },
-};
+const mainStore = useMainStore();
+const aboutMe = computed(() => mainStore.aboutMe);
 </script>
 
 <template>
   <div class="block sm:flex sm:gap-10 mt-10 sm:mt-20">
     <!-- About profile image -->
     <div class="w-full sm:w-1/4 mb-7 sm:mb-0">
-      <img src="~/static/profile.jpeg" class="rounded-lg w-96" alt="" />
+      <img src="/profile.jpeg" class="rounded-lg w-96" alt="" />
     </div>
 
     <!-- About details -->

components/contact/ContactDetails.vue

@@ -1,12 +1,11 @@
-<script>
-export default {
-  props: ["contacts"],
-  data: () => {
-    return {
-      // @todo
-    };
+<script setup>
+
+defineProps({
+  contacts: {
+    type: Array,
+    required: true,
   },
-};
+});
 </script>
 
 <template>

components/contact/ContactForm.vue

@@ -1,13 +1,5 @@
-<script>
+<script setup>
 import Button from "../reusable/Button.vue";
-export default {
-  components: { Button },
-  data: () => {
-    return {
-      // @todo
-    };
-  },
-};
 </script>
 
 <template>