Skip to content

Instantly share code, notes, and snippets.

@yakserr
Created April 19, 2024 00:19
Show Gist options
  • Save yakserr/48460b31f85a7ba6efbfa0c779f9549a to your computer and use it in GitHub Desktop.
Save yakserr/48460b31f85a7ba6efbfa0c779f9549a to your computer and use it in GitHub Desktop.
Screen helper to develop responsive in Nuxt x Nuxt UI
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment