refactor: convert to script setup

packages/hoppscotch-app/components/app/Footer.vue

@@ -156,45 +156,39 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { ref, watch } from "@nuxtjs/composition-api"
 import { defineActionHandler } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 import { useSetting } from "~/newstore/settings"
 
-export default defineComponent({
+const showShortcuts = ref(false)
-  setup() {
+const showShare = ref(false)
-    const showShortcuts = ref(false)
-    const showShare = ref(false)
 
-    defineActionHandler("flyouts.keybinds.toggle", () => {
+defineActionHandler("flyouts.keybinds.toggle", () => {
   showShortcuts.value = !showShortcuts.value
-    })
+})
 
-    defineActionHandler("modals.share.toggle", () => {
+defineActionHandler("modals.share.toggle", () => {
   showShare.value = !showShare.value
-    })
+})
 
-    return {
+const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
-      EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
+const SIDEBAR = useSetting("SIDEBAR")
-      SIDEBAR: useSetting("SIDEBAR"),
+const ZEN_MODE = useSetting("ZEN_MODE")
-      ZEN_MODE: useSetting("ZEN_MODE"),
+const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
-      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
+const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
-      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
 
-      navigatorShare: !!navigator.share,
+const navigatorShare = !!navigator.share
 
-      showShortcuts,
+watch(
-      showShare,
+  () => ZEN_MODE.value,
+  () => {
+    EXPAND_NAVIGATION.value = !ZEN_MODE.value
   }
-  },
+)
-  watch: {
+
-    ZEN_MODE() {
+const nativeShare = () => {
-      this.EXPAND_NAVIGATION = !this.ZEN_MODE
-    },
-  },
-  methods: {
-    nativeShare() {
   if (navigator.share) {
     navigator
       .share({
@@ -207,10 +201,9 @@ export default defineComponent({
   } else {
     // fallback
   }
-    },
+}
-    chatWithUs() {
+
+const chatWithUs = () => {
   showChat()
-    },
+}
-  },
-})
 </script>

packages/hoppscotch-app/components/app/GitHubStarButton.vue

@@ -18,19 +18,13 @@
   </transition>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
 import GithubButton from "vue-github-button"
 
-export default defineComponent({
+defineProps({
-  components: {
-    GithubButton,
-  },
-  props: {
   size: {
     type: String,
     default: undefined,
   },
-  },
 })
 </script>

packages/hoppscotch-app/components/app/Section.vue

@@ -4,15 +4,11 @@
   </section>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+defineProps({
-
-export default defineComponent({
-  props: {
   label: {
     type: String,
     default: "Section",
   },
-  },
 })
 </script>

packages/hoppscotch-app/components/app/Share.vue

@@ -2,7 +2,7 @@
   <SmartModal
     v-if="show"
     :title="$t('app.invite_your_friends')"
-    @close="$emit('hide-modal')"
+    @close="hideModal"
   >
     <template #body>
       <p class="text-secondaryLight mb-8 px-2">
@@ -34,28 +34,34 @@
   </SmartModal>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { ref, useContext } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default defineComponent({
+const {
-  props: {
+  $toast,
-    show: Boolean,
+  app: { i18n },
-  },
+} = useContext()
-  data() {
+const t = i18n.t.bind(i18n)
-    const url = "https://hoppscotch.io"
-    const text = "Hoppscotch - Open source API development ecosystem."
-    const description =
-      "Helps you create requests faster, saving precious time on development."
-    const subject =
-      "Checkout Hoppscotch - an open source API development ecosystem"
-    const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
-    const twitter = "hoppscotch_io"
 
-    return {
+defineProps<{
-      url: "https://hoppscotch.io",
+  show: Boolean
-      copyIcon: "copy",
+}>()
-      platforms: [
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const url = "https://hoppscotch.io"
+const text = "Hoppscotch - Open source API development ecosystem."
+const description =
+  "Helps you create requests faster, saving precious time on development."
+const subject = "Checkout Hoppscotch - an open source API development ecosystem"
+const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
+const twitter = "hoppscotch_io"
+
+const copyIcon = ref("copy")
+const platforms = [
   {
     name: "Email",
     icon: "mail",
@@ -81,23 +87,20 @@ export default defineComponent({
     icon: "brands/linkedin",
     link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
   },
-      ],
+]
-    }
+
-  },
+const copyAppLink = () => {
-  methods: {
+  copyToClipboard(url)
-    copyAppLink() {
+  copyIcon.value = "check"
-      copyToClipboard(this.url)
+  $toast.success(t("state.copied_to_clipboard").toString(), {
-      this.copyIcon = "check"
-      this.$toast.success(this.$t("state.copied_to_clipboard"), {
     icon: "content_paste",
   })
-      setTimeout(() => (this.copyIcon = "copy"), 1000)
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
-    },
+}
-    hideModal() {
+
-      this.$emit("hide-modal")
+const hideModal = () => {
-    },
+  emit("hide-modal")
-  },
+}
-})
 </script>
 
 <style lang="scss" scoped>

packages/hoppscotch-app/components/app/Sidenav.vue

@@ -26,50 +26,46 @@
   </aside>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { useContext } from "@nuxtjs/composition-api"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSetting } from "~/newstore/settings"
 
-export default defineComponent({
+const {
-  setup() {
+  app: { i18n },
-    return {
+} = useContext()
-      windowInnerWidth: useWindowSize(),
+const t = i18n.t.bind(i18n)
-      EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
+
-    }
+const windowInnerWidth = useWindowSize()
-  },
+const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
-  data() {
+
-    return {
+const primaryNavigation = [
-      primaryNavigation: [
   {
     target: "index",
     svg: "link-2",
-          title: this.$t("navigation.rest"),
+    title: t("navigation.rest"),
   },
   {
     target: "graphql",
     svg: "graphql",
-          title: this.$t("navigation.graphql"),
+    title: t("navigation.graphql"),
   },
   {
     target: "realtime",
     svg: "globe",
-          title: this.$t("navigation.realtime"),
+    title: t("navigation.realtime"),
   },
   {
     target: "documentation",
     svg: "book-open",
-          title: this.$t("navigation.doc"),
+    title: t("navigation.doc"),
   },
   {
     target: "settings",
     svg: "settings",
-          title: this.$t("navigation.settings"),
+    title: t("navigation.settings"),
   },
-      ],
+]
-    }
-  },
-})
 </script>
 
 <style scoped lang="scss">

packages/hoppscotch-app/components/app/SlideOver.vue

@@ -33,37 +33,34 @@
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
+import { onMounted, watch } from "@nuxtjs/composition-api"
 
-export default defineComponent({
+const props = defineProps<{
-  props: {
+  show: Boolean
-    show: {
+}>()
-      type: Boolean,
+
-      required: true,
+const emit = defineEmits<{
-      default: false,
+  (e: "close"): void
-    },
+}>()
-  },
+
-  watch: {
+watch(
-    show: {
+  () => props.show,
-      immediate: true,
+  (show) => {
-      handler(show) {
     if (process.client) {
       if (show) document.body.style.setProperty("overflow", "hidden")
       else document.body.style.removeProperty("overflow")
     }
-      },
+  }
-    },
+)
-  },
+
-  mounted() {
+onMounted(() => {
   document.addEventListener("keydown", (e) => {
-      if (e.keyCode === 27 && this.show) this.close()
+    if (e.keyCode === 27 && props.show) close()
   })
-  },
-  methods: {
-    close() {
-      this.$emit("close")
-    },
-  },
 })
+
+const close = () => {
+  emit("close")
+}
 </script>

packages/hoppscotch-app/components/app/Support.vue

@@ -23,10 +23,7 @@
           :description="$t('support.shortcuts')"
           info-icon="chevron_right"
           active
-          @click.native="
+          @click.native="showShortcuts()"
-            showShortcuts()
-            hideModal()
-          "
         />
         <SmartItem
           svg="gift"
@@ -44,10 +41,7 @@
           :description="$t('support.chat')"
           info-icon="chevron_right"
           active
-          @click.native="
+          @click.native="chatWithUs()"
-            chatWithUs()
-            hideModal()
-          "
         />
         <SmartItem
           svg="brands/discord"
@@ -74,25 +68,28 @@
   </SmartModal>
 </template>
 
-<script>
+<script setup lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
 import { invokeAction } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 
-export default defineComponent({
+defineProps<{
-  props: {
+  show: Boolean
-    show: Boolean,
+}>()
-  },
+
-  methods: {
+const emit = defineEmits<{
-    chatWithUs() {
+  (e: "hide-modal"): void
+}>()
+
+const chatWithUs = () => {
   showChat()
-    },
+  hideModal()
-    showShortcuts() {
+}
+
+const showShortcuts = () => {
   invokeAction("flyouts.keybinds.toggle")
-    },
+}
-    hideModal() {
+
-      this.$emit("hide-modal")
+const hideModal = () => {
-    },
+  emit("hide-modal")
-  },
+}
-})
 </script>