feat: remove nuxt/ui-pro and enable unocss for editor

Author: OrbisK

app.vue

@@ -1,7 +1,5 @@
 <template>
-  <UApp>
-    <NuxtLayout>
-      <NuxtPage />
-    </NuxtLayout>
-  </UApp>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
 </template>

app/assets/css/main.css

@@ -1,2 +1,6 @@
 @import "tailwindcss";
-@import "@nuxt/ui-pro";
+@import "@nuxt/ui";
+
+:root {
+    --header-height: 4rem;
+}

app/layouts/default.vue

@@ -40,19 +40,31 @@ const vueUseVersions = computed(() => {
 const vueUseVersionsSorted = useSorted(vueUseVersions, (a, b) => semver.compare(b, a))
 
 provide('vueVersion', vueVersion)
+
+const colorMode = useColorMode()
+
+function toggleColorMode() {
+  colorMode.value = colorMode.value === 'dark' ? 'light' : 'dark'
+}
 </script>
 
 <template>
   <UApp>
-    <UHeader>
-      <template #title>
+    <header class="flex items-center justify-around h-(--header-height)">
+      <div class="flex gap-2 items-center">
         <UIcon name="i-logos-vueuse" class="size-8" />VueUse Playground
-      </template>
-      <template #right>
+      </div>
+
+      <div class="flex gap-2 items-center">
         <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" />
-        <UColorModeButton />
+        <UButton
+          color="neutral" variant="ghost"
+          :icon="colorMode.value === 'dark' ? 'i-heroicons-moon' : 'i-heroicons-sun'"
+          aria-label="color mode"
+          @click="toggleColorMode"
+        />
 
         <UTooltip text="Open on GitHub" :kbds="['meta', 'G']">
           <UButton
@@ -64,11 +76,11 @@ provide('vueVersion', vueVersion)
             aria-label="GitHub"
           />
         </UTooltip>
-      </template>
-    </UHeader>
+      </div>
+    </header>
 
-    <UMain class="h-[calc(100vh-var(--ui-header-height))]">
+    <main class="h-[calc(100vh-var(--header-height))]">
       <NuxtPage />
-    </UMain>
+    </main>
   </UApp>
 </template>

app/pages/index.vue

@@ -88,8 +88,23 @@ const theme = computed(() => {
   else
     return 'light'
 })
+
+const previewOptions = {
+  headHTML: `
+    <script src="https://cdn.jsdelivr.net/npm/@unocss/runtime"><\/script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@unocss/reset/tailwind.min.css" />
+    <script>
+      window.__unocss = {
+        rules: [],
+        presets: [],
+      }
+    <\/script>
+  `,
+}
 </script>
 
 <template>
-  <Repl :store="store" :editor="MonacoEditor" :show-compile-output="true" :theme="theme" :preview-theme="true" />
+  <client-only>
+    <Repl :store="store" :editor="MonacoEditor" :show-compile-output="true" :theme="theme" :preview-theme="true" :preview-options="previewOptions" />
+  </client-only>
 </template>

app/template/App.vue

@@ -8,7 +8,7 @@ const timeago = useTimeAgo(ms)
 </script>
 
 <template>
-  <div>
+  <div class="flex items-center justify-center w-screen h-screen">
     <input v-model="input" type="text" placeholder="Type anything...">
     <div>
       Last changed: <span class="text-primary">{{ timeago }}</span>

nuxt.config.ts

@@ -6,7 +6,7 @@ export default defineNuxtConfig({
   future: {
     compatibilityVersion: 4,
   },
-  modules: ['@nuxt/ui-pro', '@nuxt/eslint', '@vueuse/nuxt'],
+  modules: ['@nuxt/ui', '@nuxt/eslint', '@vueuse/nuxt'],
   eslint: {
     config: {
       standalone: false,

package.json

@@ -16,7 +16,7 @@
     "@antfu/eslint-config": "^4.11.0",
     "@iconify-json/logos": "^1.2.4",
     "@nuxt/eslint": "^1.3.0",
-    "@nuxt/ui-pro": "^3.0.2",
+    "@nuxt/ui": "^3.0.2",
     "@types/semver": "^7.7.0",
     "@vue/repl": "^4.5.1",
     "@vueuse/nuxt": "13.0.0",