refactor: convert to script setup

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

@@ -156,61 +156,54 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, ref } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+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({
-  setup() {
-    const showShortcuts = ref(false)
-    const showShare = ref(false)
+const showShortcuts = ref(false)
+const showShare = ref(false)
 
-    defineActionHandler("flyouts.keybinds.toggle", () => {
-      showShortcuts.value = !showShortcuts.value
-    })
-
-    defineActionHandler("modals.share.toggle", () => {
-      showShare.value = !showShare.value
-    })
-
-    return {
-      EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
-      SIDEBAR: useSetting("SIDEBAR"),
-      ZEN_MODE: useSetting("ZEN_MODE"),
-      COLUMN_LAYOUT: useSetting("COLUMN_LAYOUT"),
-      SIDEBAR_ON_LEFT: useSetting("SIDEBAR_ON_LEFT"),
-
-      navigatorShare: !!navigator.share,
-
-      showShortcuts,
-      showShare,
-    }
-  },
-  watch: {
-    ZEN_MODE() {
-      this.EXPAND_NAVIGATION = !this.ZEN_MODE
-    },
-  },
-  methods: {
-    nativeShare() {
-      if (navigator.share) {
-        navigator
-          .share({
-            title: "Hoppscotch",
-            text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
-            url: "https://hoppscotch.io",
-          })
-          .then(() => {})
-          .catch(console.error)
-      } else {
-        // fallback
-      }
-    },
-    chatWithUs() {
-      showChat()
-    },
-  },
+defineActionHandler("flyouts.keybinds.toggle", () => {
+  showShortcuts.value = !showShortcuts.value
 })
+
+defineActionHandler("modals.share.toggle", () => {
+  showShare.value = !showShare.value
+})
+
+const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
+const SIDEBAR = useSetting("SIDEBAR")
+const ZEN_MODE = useSetting("ZEN_MODE")
+const COLUMN_LAYOUT = useSetting("COLUMN_LAYOUT")
+const SIDEBAR_ON_LEFT = useSetting("SIDEBAR_ON_LEFT")
+
+const navigatorShare = !!navigator.share
+
+watch(
+  () => ZEN_MODE.value,
+  () => {
+    EXPAND_NAVIGATION.value = !ZEN_MODE.value
+  }
+)
+
+const nativeShare = () => {
+  if (navigator.share) {
+    navigator
+      .share({
+        title: "Hoppscotch",
+        text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
+        url: "https://hoppscotch.io",
+      })
+      .then(() => {})
+      .catch(console.error)
+  } else {
+    // fallback
+  }
+}
+
+const chatWithUs = () => {
+  showChat()
+}
 </script>

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

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

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

@@ -4,15 +4,11 @@
   </section>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "@nuxtjs/composition-api"
-
-export default defineComponent({
-  props: {
-    label: {
-      type: String,
-      default: "Section",
-    },
+<script setup lang="ts">
+defineProps({
+  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,70 +34,73 @@
   </SmartModal>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { ref, useContext } from "@nuxtjs/composition-api"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  data() {
-    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 {
+  $toast,
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
 
-    return {
-      url: "https://hoppscotch.io",
-      copyIcon: "copy",
-      platforms: [
-        {
-          name: "Email",
-          icon: "mail",
-          link: `mailto:?subject=${subject}&body=${summary}`,
-        },
-        {
-          name: "Twitter",
-          icon: "brands/twitter",
-          link: `https://twitter.com/intent/tweet?text=${text} ${description}&url=${url}&via=${twitter}`,
-        },
-        {
-          name: "Facebook",
-          icon: "brands/facebook",
-          link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
-        },
-        {
-          name: "Reddit",
-          icon: "brands/reddit",
-          link: `https://www.reddit.com/submit?url=${url}&title=${text}`,
-        },
-        {
-          name: "LinkedIn",
-          icon: "brands/linkedin",
-          link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
-        },
-      ],
-    }
+defineProps<{
+  show: Boolean
+}>()
+
+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",
+    link: `mailto:?subject=${subject}&body=${summary}`,
   },
-  methods: {
-    copyAppLink() {
-      copyToClipboard(this.url)
-      this.copyIcon = "check"
-      this.$toast.success(this.$t("state.copied_to_clipboard"), {
-        icon: "content_paste",
-      })
-      setTimeout(() => (this.copyIcon = "copy"), 1000)
-    },
-    hideModal() {
-      this.$emit("hide-modal")
-    },
+  {
+    name: "Twitter",
+    icon: "brands/twitter",
+    link: `https://twitter.com/intent/tweet?text=${text} ${description}&url=${url}&via=${twitter}`,
   },
-})
+  {
+    name: "Facebook",
+    icon: "brands/facebook",
+    link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+  },
+  {
+    name: "Reddit",
+    icon: "brands/reddit",
+    link: `https://www.reddit.com/submit?url=${url}&title=${text}`,
+  },
+  {
+    name: "LinkedIn",
+    icon: "brands/linkedin",
+    link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+  },
+]
+
+const copyAppLink = () => {
+  copyToClipboard(url)
+  copyIcon.value = "check"
+  $toast.success(t("state.copied_to_clipboard").toString(), {
+    icon: "content_paste",
+  })
+  setTimeout(() => (copyIcon.value = "copy"), 1000)
+}
+
+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">
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { useContext } from "@nuxtjs/composition-api"
 import useWindowSize from "~/helpers/utils/useWindowSize"
 import { useSetting } from "~/newstore/settings"
 
-export default defineComponent({
-  setup() {
-    return {
-      windowInnerWidth: useWindowSize(),
-      EXPAND_NAVIGATION: useSetting("EXPAND_NAVIGATION"),
-    }
+const {
+  app: { i18n },
+} = useContext()
+const t = i18n.t.bind(i18n)
+
+const windowInnerWidth = useWindowSize()
+const EXPAND_NAVIGATION = useSetting("EXPAND_NAVIGATION")
+
+const primaryNavigation = [
+  {
+    target: "index",
+    svg: "link-2",
+    title: t("navigation.rest"),
   },
-  data() {
-    return {
-      primaryNavigation: [
-        {
-          target: "index",
-          svg: "link-2",
-          title: this.$t("navigation.rest"),
-        },
-        {
-          target: "graphql",
-          svg: "graphql",
-          title: this.$t("navigation.graphql"),
-        },
-        {
-          target: "realtime",
-          svg: "globe",
-          title: this.$t("navigation.realtime"),
-        },
-        {
-          target: "documentation",
-          svg: "book-open",
-          title: this.$t("navigation.doc"),
-        },
-        {
-          target: "settings",
-          svg: "settings",
-          title: this.$t("navigation.settings"),
-        },
-      ],
-    }
+  {
+    target: "graphql",
+    svg: "graphql",
+    title: t("navigation.graphql"),
   },
-})
+  {
+    target: "realtime",
+    svg: "globe",
+    title: t("navigation.realtime"),
+  },
+  {
+    target: "documentation",
+    svg: "book-open",
+    title: t("navigation.doc"),
+  },
+  {
+    target: "settings",
+    svg: "settings",
+    title: t("navigation.settings"),
+  },
+]
 </script>
 
 <style scoped lang="scss">

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

@@ -33,37 +33,34 @@
   </div>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { onMounted, watch } from "@nuxtjs/composition-api"
 
-export default defineComponent({
-  props: {
-    show: {
-      type: Boolean,
-      required: true,
-      default: false,
-    },
-  },
-  watch: {
-    show: {
-      immediate: true,
-      handler(show) {
-        if (process.client) {
-          if (show) document.body.style.setProperty("overflow", "hidden")
-          else document.body.style.removeProperty("overflow")
-        }
-      },
-    },
-  },
-  mounted() {
-    document.addEventListener("keydown", (e) => {
-      if (e.keyCode === 27 && this.show) this.close()
-    })
-  },
-  methods: {
-    close() {
-      this.$emit("close")
-    },
-  },
+const props = defineProps<{
+  show: Boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "close"): void
+}>()
+
+watch(
+  () => props.show,
+  (show) => {
+    if (process.client) {
+      if (show) document.body.style.setProperty("overflow", "hidden")
+      else document.body.style.removeProperty("overflow")
+    }
+  }
+)
+
+onMounted(() => {
+  document.addEventListener("keydown", (e) => {
+    if (e.keyCode === 27 && props.show) 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="
-            showShortcuts()
-            hideModal()
-          "
+          @click.native="showShortcuts()"
         />
         <SmartItem
           svg="gift"
@@ -44,10 +41,7 @@
           :description="$t('support.chat')"
           info-icon="chevron_right"
           active
-          @click.native="
-            chatWithUs()
-            hideModal()
-          "
+          @click.native="chatWithUs()"
         />
         <SmartItem
           svg="brands/discord"
@@ -74,25 +68,28 @@
   </SmartModal>
 </template>
 
-<script>
-import { defineComponent } from "@nuxtjs/composition-api"
+<script setup lang="ts">
 import { invokeAction } from "~/helpers/actions"
 import { showChat } from "~/helpers/support"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  methods: {
-    chatWithUs() {
-      showChat()
-    },
-    showShortcuts() {
-      invokeAction("flyouts.keybinds.toggle")
-    },
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-  },
-})
+defineProps<{
+  show: Boolean
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
+
+const chatWithUs = () => {
+  showChat()
+  hideModal()
+}
+
+const showShortcuts = () => {
+  invokeAction("flyouts.keybinds.toggle")
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
 </script>