Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 5 additions & 3 deletions app/app.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
<UApp>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</UApp>
</template>
4 changes: 0 additions & 4 deletions app/assets/css/main.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,2 @@
@import "tailwindcss";
@import "@nuxt/ui";

:root {
--header-height: 4rem;
}
110 changes: 39 additions & 71 deletions app/layouts/default.vue
Original file line number Diff line number Diff line change
Expand Up @@ -50,11 +50,13 @@ const prod = useRouteQuery<string, boolean>('prod', 'false', {
transform: stringToBooleanTransformer,
})
const currentHref = shallowRef(window?.location?.href)
const r = useRequestURL()
const currentHref = shallowRef(r.href)
const route = useRoute()
watch(() => route.fullPath, () => {
currentHref.value = window?.location?.href
currentHref.value = r.href
})
const issueLink = computed(() => {
Expand All @@ -63,18 +65,20 @@ const issueLink = computed(() => {
</script>

<template>
<UApp>
<header class="flex items-center justify-between px-6 h-(--header-height)">
<div class="flex gap-2 items-center">
<div>
<UHeader>
<template #left>
<UIcon name="i-logos-vueuse" class="size-8" />VueUse Playground
</div>

<div class="hidden lg:flex gap-2 items-center">
<USwitch v-model="ssr" label="SSR" />
<USwitch v-model="prod" label="Prod" />
<USelectMenu v-model="vueUseVersion" :items="vueUseVersionsSorted" class="w-32" icon="i-logos-vueuse" :loading="loadingVersions" />
<USelectMenu v-model="vueVersion" :items="vueVersionsSorted" class="w-32" icon="i-logos-vue" :loading="loadingVersions" />
<UButton icon="i-lucide-refresh-ccw" size="md" color="primary" variant="soft" @click="() => fetchVersions()" />
</template>

<template #right>
<div class="hidden lg:flex gap-2 items-center">
<USwitch v-model="ssr" label="SSR" />
<USwitch v-model="prod" label="Prod" />
<USelectMenu v-model="vueUseVersion" virtualize :items="vueUseVersionsSorted" class="w-32" icon="i-logos-vueuse" :loading="loadingVersions" />
<USelectMenu v-model="vueVersion" virtualize :items="vueVersionsSorted" class="w-32" icon="i-logos-vue" :loading="loadingVersions" />
<UButton icon="i-lucide-refresh-ccw" size="md" color="primary" variant="soft" @click="() => fetchVersions()" />
</div>
<UButton
color="neutral" variant="ghost"
:icon="colorMode.preference === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'"
Expand All @@ -93,68 +97,32 @@ const issueLink = computed(() => {
/>
</UTooltip>
<UTooltip text="Report an issue on GitHub">
<ClientOnly>
<UButton
color="neutral"
variant="ghost"
:to="issueLink"
target="_blank"
icon="i-pajamas-issue-new"
aria-label="Issue via GitHub"
/>
</ClientOnly>
</UTooltip>
</div>
<div class="lg:hidden">
<UButton
color="neutral" variant="ghost"
:icon="colorMode.preference === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'"
aria-label="color mode"
@click="toggleColorMode"
/>
<UTooltip text="Open on GitHub">
<UButton
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

does this mean we lost the github link? 👀

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

header is now always visible. so we dont need it there
image

color="neutral"
variant="ghost"
to="https://github.com/vueuse"
:to="issueLink"
target="_blank"
icon="i-simple-icons-github"
aria-label="GitHub"
icon="i-pajamas-issue-new"
aria-label="Issue via GitHub"
/>
</UTooltip>
<USlideover title="Settings">
<UButton icon="i-lucide-menu" color="neutral" variant="outline" />
<template #body>
<section class="flex flex-col gap-2 items-center justify-center">
<div class="flex gap-2">
<USwitch v-model="ssr" label="SSR" />
<USwitch v-model="prod" label="Prod" />
</div>
<div class="flex gap-2">
<USelectMenu v-model="vueUseVersion" :items="vueUseVersionsSorted" class="w-32" icon="i-logos-vueuse" :loading="loadingVersions" />
<USelectMenu v-model="vueVersion" :items="vueVersionsSorted" class="w-32" icon="i-logos-vue" :loading="loadingVersions" />
<UButton icon="i-lucide-refresh-ccw" size="md" color="primary" variant="soft" @click="() => fetchVersions()" />
</div>
<ClientOnly>
<UButton
color="neutral"
variant="ghost"
:to="issueLink"
target="_blank"
icon="i-pajamas-issue-new"
aria-label="Issue via GitHub"
>
Report an issue on GitHub
</UButton>
</ClientOnly>
</section>
</template>
</USlideover>
</div>
</header>

<main class="h-[calc(100vh-var(--header-height))]">
<NuxtPage />
</main>
</UApp>
</template>
<template #body>
<section class="flex flex-col gap-2 items-center justify-center">
<div class="flex gap-2">
<USwitch v-model="ssr" label="SSR" />
<USwitch v-model="prod" label="Prod" />
</div>
<div class="flex gap-2">
<USelectMenu v-model="vueUseVersion" :items="vueUseVersionsSorted" class="w-32" icon="i-logos-vueuse" :loading="loadingVersions" />
<USelectMenu v-model="vueVersion" :items="vueVersionsSorted" class="w-32" icon="i-logos-vue" :loading="loadingVersions" />
<UButton icon="i-lucide-refresh-ccw" size="md" color="primary" variant="soft" @click="() => fetchVersions()" />
</div>
</section>
</template>
</UHeader>
<UMain class="h-[calc(100vh-var(--ui-header-height))]">
<slot />
</UMain>
</div>
</template>
3 changes: 0 additions & 3 deletions nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ export default defineNuxtConfig({
compatibilityDate: '2024-11-01',
devtools: { enabled: true },
sourcemap: false,
future: {
compatibilityVersion: 4,
},
modules: ['@nuxt/ui', '@nuxt/eslint', '@vueuse/nuxt'],
eslint: {
config: {
Expand Down
42 changes: 23 additions & 19 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
"name": "@vueuse/playground",
"type": "module",
"private": true,
"packageManager": "pnpm@10.7.1+sha512.2d92c86b7928dc8284f53494fb4201f983da65f0fb4f0d40baafa5cf628fa31dae3e5968f12466f17df7e97310e30f343a648baea1b9b350685dafafffdf5808",
"packageManager": "pnpm@10.25.0",
"scripts": {
"build": "ROLLDOWN_OPTIONS_VALIDATION=loose nuxt build",
"dev": "ROLLDOWN_OPTIONS_VALIDATION=loose nuxt dev",
Expand All @@ -13,26 +13,27 @@
"lint:fix": "eslint --fix"
},
"devDependencies": {
"@antfu/eslint-config": "^4.11.0",
"@iconify-json/logos": "^1.2.4",
"@nuxt/eslint": "^1.3.0",
"@nuxt/ui": "^3.0.2",
"@types/semver": "^7.7.0",
"@vue/repl": "^4.5.1",
"@vueuse/nuxt": "13.0.0",
"@vueuse/router": "^13.0.0",
"eslint": "^9.23.0",
"fast-npm-meta": "^0.4.0",
"nuxt": "^3.16.2",
"semver": "^7.7.1",
"typescript": "^5.8.2",
"vue": "^3.5.13",
"vue-router": "^4.5.0",
"vue-tsc": "^2.2.8"
"@antfu/eslint-config": "^4.19.0",
"@iconify-json/logos": "^1.2.10",
"@nuxt/eslint": "^1.12.1",
"@nuxt/ui": "^4.2.1",
"@types/semver": "^7.7.1",
"@vue/repl": "^4.7.1",
"@vueuse/nuxt": "14.1.0",
"@vueuse/router": "^14.1.0",
"eslint": "^9.39.1",
"fast-npm-meta": "^0.4.7",
"nuxt": "^4.2.2",
"semver": "^7.7.3",
"typescript": "^5.9.3",
"vue": "^3.5.25",
"vue-router": "^4.6.4",
"vue-tsc": "^3.1.8"
},
"pnpm": {
"overrides": {
"vite": "npm:rolldown-vite@latest"
"vite": "8.0.0-beta.0",
"rolldown": "1.0.0-beta.53"
},
"ignoredBuiltDependencies": [
"@parcel/watcher",
Expand All @@ -41,6 +42,9 @@
"onlyBuiltDependencies": [
"esbuild",
"rolldown"
]
],
"patchedDependencies": {
"@vue/repl": "patches/@vue__repl.patch"
}
}
}
26 changes: 13 additions & 13 deletions patches/@vue__repl.patch
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
diff --git a/dist/monaco-editor.js b/dist/monaco-editor.js
index c37798518110282820e81a8667383d83839b560d..2d151ca8ff009fe77c8d135855979eabea131763 100644
index 32187d073bfa62031a526f4e20a21ee8ac14c857..e7803203d240a9cd2b765a37a4cd61b2b17e49fc 100644
--- a/dist/monaco-editor.js
+++ b/dist/monaco-editor.js
@@ -178015,7 +178015,7 @@ async function registerProviders(worker, language, getSyncUris, languages) {

function WorkerWrapper$1(options) {
return new Worker(
- ""+new URL('assets/editor.worker-KaUq7_iC.js', import.meta.url).href+"",
+ ""+new URL('./assets/editor.worker-KaUq7_iC.js', import.meta.url).href+"",
{
type: "module",
name: options?.name
return new Worker(
- ""+new URL('assets/editor.worker-C6mZTrQO.js', import.meta.url).href+"",
+ ""+new URL('./assets/editor.worker-C6mZTrQO.js', import.meta.url).href+"",
{
type: "module",
name: options?.name
@@ -178034,7 +178034,7 @@ function getOrCreateModel(uri, lang, value) {

function WorkerWrapper(options) {
return new Worker(
- ""+new URL('assets/vue.worker-C169KAy9.js', import.meta.url).href+"",
+ ""+new URL('./assets/vue.worker-C169KAy9.js', import.meta.url).href+"",
{
type: "module",
name: options?.name
return new Worker(
- ""+new URL('assets/vue.worker-mfJR090o.js', import.meta.url).href+"",
+ ""+new URL('./assets/vue.worker-mfJR090o.js', import.meta.url).href+"",
{
type: "module",
name: options?.name
Loading