fiee-official-website/src/views/CommitteeAppointment/index.vue

<script setup>
import { computed } from "vue";
import { useWindowSize } from "@vueuse/core";

import size375 from "./size375/index.vue";
import size768 from "./size768/index.vue";
import size1440 from "./size1440/index.vue";
import size1920 from "./size1920/index.vue";
import { useRouter } from "vue-router";
import { useI18n } from "vue-i18n";

const router = useRouter();
const { width } = useWindowSize();
const { t } = useI18n();

const viewComponent = computed(() => {
  const viewWidth = width.value;
  if (viewWidth <= 450) {
    return size375;
  } else if (viewWidth <= 1100) {
    return size768;
  } else if (viewWidth <= 1500) {
    return size1440;
  } else if (viewWidth <= 1920 || viewWidth > 1920) {
    return size1920;
  }
});
</script>

<template>
  <component :is="viewComponent" />
</template>

<style scoped lang="scss"></style>