realtime.vue 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <SmartTabs
  3. class="h-full overflow-hidden"
  4. styles="sticky top-0 z-10 border-b border-dividerLight !overflow-visible"
  5. >
  6. <SmartTab
  7. id="websocket"
  8. :label="$t('tab.websocket')"
  9. :selected="true"
  10. style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
  11. >
  12. <RealtimeWebsocket />
  13. </SmartTab>
  14. <SmartTab
  15. id="sse"
  16. :label="$t('tab.sse')"
  17. style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
  18. >
  19. <RealtimeSse />
  20. </SmartTab>
  21. <SmartTab
  22. id="socketio"
  23. :label="$t('tab.socketio')"
  24. style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
  25. >
  26. <RealtimeSocketio />
  27. </SmartTab>
  28. <SmartTab
  29. id="mqtt"
  30. :label="$t('tab.mqtt')"
  31. style="height: calc(100% - var(--sidebar-primary-sticky-fold))"
  32. >
  33. <RealtimeMqtt />
  34. </SmartTab>
  35. </SmartTabs>
  36. </template>
  37. <script>
  38. export default {
  39. head() {
  40. return {
  41. title: `${this.$t("navigation.realtime")} • Hoppscotch`,
  42. }
  43. },
  44. }
  45. </script>