Screen helper to develop responsive in Nuxt x Nuxt UI

UIHelper.vue

<script lang='ts' setup>
const { width, height } = useWindowSize()
const { public: { showDebugger, siteURL, sanityEnv } } = useRuntimeConfig()

const source = computed(() => `${siteURL} - ${sanityEnv} - ${width.value}x${height.value} - ${navigator.userAgent} - ${navigator.language}`)
const { copy } = useClipboard({ source })
</script>

<template>
  <div v-if="showDebugger" class="fixed bottom-5 left-5 z-50 flex items-center space-x-2 rounded-full bg-black px-2.5 py-1 font-mono text-xs font-medium text-white border-2  border-blue-500">
    {{ width.toString() }} x {{ height.toString() }}

    <span class="sm:hidden">XS</span>
    <span class="hidden sm:inline md:hidden">SM</span>
    <span class="hidden md:inline lg:hidden">MD</span>
    <span class="hidden lg:inline xl:hidden">LG</span>
    <span class="hidden xl:inline 2xl:hidden">XL</span>
    <span class="hidden 2xl:inline">2XL</span>
    <UPopover mode="hover" class="flex items-center" :ui="{ ring: 'ring-0' }">
      <UIcon name="i-heroicons-light-bulb" class="text-primary text-sm" />

      <template #panel>
        <div class="p-4 bg-black text-white">
          <p>Environment: {{ siteURL }}</p>
          <p>Sanity : {{ sanityEnv }}</p>
          <UButton size="xs" variant="solid" class="mt-2" color="white" @click="copy(source)">
            Copier les informations
          </UButton>
        </div>
      </template>
    </UPopover>
  </div>
</template>