fiee-official-website/src/views/press-releases/index.vue

<template>
  <div class="new-releases-page">
    <component :is="viewComponent" />
  </div>
</template>
<script setup>
import size375 from '@/views/press-releases/size375/index.vue'
import size768 from '@/views/press-releases/size375/index.vue'
import size1440 from '@/views/press-releases/size1920/index.vue'
import size1920 from '@/views/press-releases/size1920/index.vue'
import { computed } from 'vue'
import { useWindowSize } from '@vueuse/core'

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

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