Skip to content

Commit dbed5b7

Browse files
harlan-zwharlan-zw
committed
chore: tidy up playground
1 parent c1c6d8a commit dbed5b7

File tree

17 files changed

+873
-283
lines changed

17 files changed

+873
-283
lines changed

‎playground/assets/css/main.css‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@import "tailwindcss";
2+
@import "@nuxt/ui";

‎playground/nuxt.config.ts‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,16 @@
11
import NuxtScripts from '../src/module'
2+
import { createResolver } from '@nuxt/kit'
3+
4+
const { resolve } = createResolver(import.meta.url)
25

36
export default defineNuxtConfig({
47
modules: [
58
NuxtScripts,
69
'@nuxt/ui',
710
],
811

12+
css: ['~/assets/css/main.css'],
13+
914
devtools: { enabled: true },
1015

1116
nitro: {
@@ -17,4 +22,18 @@ export default defineNuxtConfig({
1722
scripts: {
1823
debug: true,
1924
},
25+
26+
hooks: {
27+
'scripts:registry': function (registry) {
28+
registry.push({
29+
category: 'custom',
30+
label: 'My Custom Script',
31+
src: '/mock-custom-script.js',
32+
import: {
33+
name: 'useScriptMyCustomScript',
34+
from: resolve('./scripts/myCustomScript'),
35+
},
36+
})
37+
},
38+
},
2039
})

‎playground/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
},
1010
"dependencies": {
1111
"@nuxt/scripts": "latest",
12-
"nuxt": "latest",
13-
"@nuxt/ui": "latest"
12+
"@nuxt/ui": "latest",
13+
"nuxt": "latest"
1414
}
1515
}

‎playground/pages/features/custom-registry.vue‎

Lines changed: 189 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,189 @@
1+
<script setup lang="ts">
2+
// This demonstrates loading a custom registry script on a specific page
3+
// The script will appear in DevTools when this page is visited
4+
5+
// Auto-imported from our custom registry
6+
const { proxy, status } = useScriptMyCustomScript({
7+
apiKey: 'demo-api-key-123',
8+
scriptOptions: {
9+
trigger: 'onNuxtReady',
10+
// Add some DevTools metadata for demonstration
11+
performanceMarkFeature: 'custom-registry-demo',
12+
},
13+
})
14+
15+
const events = ref<any[]>([])
16+
17+
function trackEvent(eventName: string, data?: Record<string, any>) {
18+
if (proxy.track) {
19+
proxy.track(eventName, data)
20+
21+
// Update our local events list for demo purposes
22+
if (proxy.getEvents) {
23+
events.value = proxy.getEvents()
24+
}
25+
}
26+
}
27+
28+
function identifyUser() {
29+
if (proxy.identify) {
30+
proxy.identify('user-123')
31+
}
32+
}
33+
34+
// Watch for status changes
35+
watch(status, (newStatus) => {
36+
console.log('Script status changed:', newStatus)
37+
}, { immediate: true })
38+
</script>
39+
40+
<template>
41+
<div class="space-y-6">
42+
<div>
43+
<h1 class="text-3xl font-bold">
44+
Custom Registry Script Demo
45+
</h1>
46+
<p class="text-gray-600 mt-2">
47+
This page demonstrates a custom script registered via the <code>scripts:registry</code> hook.
48+
</p>
49+
<UAlert
50+
icon="i-heroicons-information-circle"
51+
color="blue"
52+
variant="soft"
53+
class="mt-4"
54+
title="DevTools Integration"
55+
description="Open Nuxt DevTools > Scripts tab to see this custom script with its metadata and status."
56+
/>
57+
</div>
58+
59+
<UCard>
60+
<template #header>
61+
<h2 class="text-xl font-semibold">
62+
Script Status
63+
</h2>
64+
</template>
65+
66+
<div class="space-y-4">
67+
<div>
68+
<span class="font-medium">Current Status:</span>
69+
<UBadge
70+
:color="status === 'loaded' ? 'green' : status === 'loading' ? 'yellow' : 'gray'"
71+
class="ml-2"
72+
>
73+
{{ status }}
74+
</UBadge>
75+
</div>
76+
77+
<div>
78+
<span class="font-medium">Script Features:</span>
79+
<ul class="list-disc list-inside mt-2 space-y-1 text-sm">
80+
<li>Auto-imported as <code>useScriptMyCustomScript</code></li>
81+
<li>Registered via <code>scripts:registry</code> hook</li>
82+
<li>Full TypeScript support</li>
83+
<li>DevTools integration with metadata</li>
84+
<li>Schema validation in development</li>
85+
<li>Page-specific loading (only loads on this page)</li>
86+
</ul>
87+
</div>
88+
89+
<div>
90+
<span class="font-medium">DevTools Visibility:</span>
91+
<p class="text-sm text-gray-600 mt-1">
92+
This script only loads when you visit this page. Check the Scripts tab in Nuxt DevTools to see:
93+
</p>
94+
<ul class="list-disc list-inside mt-1 space-y-1 text-xs text-gray-600">
95+
<li>Script appears with "My Custom Script" label</li>
96+
<li>Registry metadata shows <code>apiKey: demo-api-key-123</code></li>
97+
<li>Status transitions from "awaitingLoad" → "loading" → "loaded"</li>
98+
<li>Events are tracked as the script loads and functions are called</li>
99+
</ul>
100+
</div>
101+
</div>
102+
</UCard>
103+
104+
<UCard>
105+
<template #header>
106+
<h2 class="text-xl font-semibold">
107+
Demo Actions
108+
</h2>
109+
</template>
110+
111+
<div class="space-y-4">
112+
<div class="flex flex-wrap gap-3">
113+
<UButton
114+
:disabled="status !== 'loaded'"
115+
@click="trackEvent('page_view', { page: '/features/custom-registry' })"
116+
>
117+
Track Page View
118+
</UButton>
119+
120+
<UButton
121+
:disabled="status !== 'loaded'"
122+
color="blue"
123+
@click="trackEvent('button_click', { button: 'demo-action', timestamp: Date.now() })"
124+
>
125+
Track Button Click
126+
</UButton>
127+
128+
<UButton
129+
:disabled="status !== 'loaded'"
130+
color="green"
131+
@click="identifyUser()"
132+
>
133+
Identify User
134+
</UButton>
135+
</div>
136+
137+
<div v-if="status !== 'loaded'" class="text-sm text-gray-500">
138+
Actions will be enabled once the script is loaded.
139+
</div>
140+
</div>
141+
</UCard>
142+
143+
<UCard v-if="events.length > 0">
144+
<template #header>
145+
<h2 class="text-xl font-semibold">
146+
Tracked Events
147+
</h2>
148+
</template>
149+
150+
<div class="space-y-2">
151+
<div
152+
v-for="(event, index) in events"
153+
:key="index"
154+
class="p-3 bg-gray-50 rounded-lg"
155+
>
156+
<div class="flex justify-between items-start">
157+
<span class="font-medium">{{ event.event }}</span>
158+
<span class="text-sm text-gray-500">{{ new Date(event.timestamp).toLocaleTimeString() }}</span>
159+
</div>
160+
<pre v-if="event.data && Object.keys(event.data).length > 0" class="text-sm mt-2 text-gray-600">{{ JSON.stringify(event.data, null, 2) }}</pre>
161+
</div>
162+
</div>
163+
</UCard>
164+
165+
<UCard>
166+
<template #header>
167+
<h2 class="text-xl font-semibold">
168+
Implementation Details
169+
</h2>
170+
</template>
171+
172+
<div class="space-y-4 text-sm">
173+
<div>
174+
<h3 class="font-medium">
175+
Registry Configuration (nuxt.config.ts)
176+
</h3>
177+
<pre class="mt-2 p-3 bg-gray-100 rounded text-xs overflow-x-auto"><code /></pre>
178+
</div>
179+
180+
<div>
181+
<h3 class="font-medium">
182+
Usage in Component
183+
</h3>
184+
<pre class="mt-2 p-3 bg-gray-100 rounded text-xs overflow-x-auto"><code /></pre>
185+
</div>
186+
</div>
187+
</UCard>
188+
</div>
189+
</template>

0 commit comments

Comments
 (0)