/
app.vue
77 lines (68 loc) · 1.65 KB
/
app.vue
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<script setup lang="ts">
import 'floating-vue/dist/style.css'
import 'vanilla-jsoneditor/themes/jse-theme-dark.css'
import 'splitpanes/dist/splitpanes.css'
import './styles/global.css'
import { setupClientRPC } from './setup/client-rpc'
if (process.client)
import('./setup/unocss-runtime')
useHead({
title: 'Nuxt DevTools',
meta: [
{
name: 'viewport',
content: 'width=device-width, initial-scale=1',
},
],
link: [
{
rel: 'icon',
type: 'image/svg+xml',
href: '/nuxt.svg',
},
],
})
setupClientRPC()
const client = useClient()
const route = useRoute()
const isUtilityView = computed(() => route.path.startsWith('/__'))
const waiting = computed(() => !client.value && !showConnectionWarning.value)
addEventListener('keydown', (e) => {
if (e.code === 'KeyD' && e.altKey) {
client.value?.closeDevTools()
e.preventDefault()
}
})
const {
scale,
} = useDevToolsSettings()
onMounted(() => {
const injectClient = useInjectionClient()
watchEffect(() => {
window.__NUXT_DEVTOOLS__ = injectClient.value
})
watchEffect(() => {
document.body.style.fontSize = `${scale.value * 15}px`
})
})
</script>
<template>
<div fixed inset-0 h-screen w-screen>
<NuxtLoadingIndicator />
<Notification />
<NLoading v-if="waiting">
Connecting....
</NLoading>
<div
v-else :grid="isUtilityView ? 'flex' : '~ cols-[50px_1fr]'"
h-full h-screen of-hidden font-sans bg-base
>
<SideNav v-show="!isUtilityView" of-x-hidden of-y-auto />
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</div>
<DisconnectIndicator />
<RestartDialogs />
</div>
</template>