feat: finally a monaco editor

app/pages/presets/new.vue

@@ -1,56 +1,27 @@
 <template>
-  <ClientOnly>
-    <div ref="editorContainer" class="h-96 w-full border rounded-md overflow-hidden"></div>
-  </ClientOnly>
-
+  <div class="h-96 w-full border rounded-md overflow-hidden">
+    <ClientOnly
+      ><MonacoEditor :options="editorOptions" class="h-full w-full"
+    /></ClientOnly>
+  </div>
 </template>
 
 <script setup lang="ts">
-import mocha from "@catppuccin/vscode/themes/mocha.json";
+import mocha from "~/lib/catppuccin-mocha.json";
+const editorOptions = {
+  automaticLayout: true,
+  fontFamily: "'JetBrains Mono', monospace",
+  fontSize: 14,
+  language: "json",
+  minimap: { enabled: false },
+};
 
-const editorContainer = ref<HTMLElement | null>(null);
-const editorInstance = shallowRef<any>(null);
-const monaco = useMonaco();
-const value = ref('');
+if (import.meta.client) {
+  const monaco = await useMonaco();
 
-onMounted(() => {
-  if (!monaco.value) return;
-
-  // Transformation logic for VS Code -> Monaco
-  const rules = (mocha as any).tokenColors.flatMap((color: any) => {
-    const scopes = Array.isArray(color.scope) ? color.scope : [color.scope];
-    return scopes.map((scope: string) => ({
-      token: scope || '',
-      foreground: color.settings.foreground,
-      fontStyle: color.settings.fontStyle,
-    }));
-  });
-
-  monaco.value.editor.defineTheme('catppuccin-mocha', {
-    base: 'vs-dark',
-    inherit: true,
-    rules: rules,
-    colors: (mocha as any).colors
-  });
-
-  if (editorContainer.value) {
-    editorInstance.value = monaco.value.editor.create(editorContainer.value, {
-      value: value.value,
-      language: 'typescript',
-      theme: 'catppuccin-mocha',
-      automaticLayout: true,
-      minimap: { enabled: false },
-      scrollBeyondLastLine: false,
-    });
-
-    // Sync value changes back to ref
-    editorInstance.value.onDidChangeModelContent(() => {
-      value.value = editorInstance.value.getValue();
-    });
+  if (monaco) {
+    monaco.editor.defineTheme("catppuccin-mocha", mocha);
+    monaco.editor.setTheme("catppuccin-mocha");
   }
-});
-
-onBeforeUnmount(() => {
-  editorInstance.value?.dispose();
-});
+}
 </script>

debug-theme.js

@@ -1,14 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-
-const themePath = 'node_modules/.pnpm/@catppuccin+vscode@3.18.1/node_modules/@catppuccin/vscode/themes/mocha.json';
-const content = fs.readFileSync(themePath, 'utf8');
-const json = JSON.parse(content);
-
-console.log('Keys:', Object.keys(json));
-if (json.tokenColors) {
-    console.log('First tokenColor:', JSON.stringify(json.tokenColors[0], null, 2));
-    console.log('Type of scope:', typeof json.tokenColors[0].scope);
-} else {
-    console.log('tokenColors not found!');
-}

nuxt.config.ts

@@ -1,39 +1,44 @@
 import tailwindcss from "@tailwindcss/vite";
 import { shadcn } from "@clerk/themes";
-
+import monacoEditorPlugin from "vite-plugin-monaco-editor";
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  compatibilityDate: '2025-07-15',
+  compatibilityDate: "2025-07-15",
   devtools: { enabled: true },
-  css: ['~/assets/css/tailwind.css'],
+  css: ["~/assets/css/tailwind.css"],
   vite: {
-    plugins: [
-      tailwindcss(),
-    ],
+    plugins: [tailwindcss()],
   },
-  modules: ['shadcn-nuxt', '@nuxtjs/color-mode', '@pinia/nuxt', 'nuxt-cron', '@clerk/nuxt', 'nuxt-monaco-editor'],
+  modules: [
+    "shadcn-nuxt",
+    "@nuxtjs/color-mode",
+    "@pinia/nuxt",
+    "nuxt-cron",
+    "@clerk/nuxt",
+    "nuxt-monaco-editor",
+  ],
   colorMode: {
-    classSuffix: ''
+    classSuffix: "",
   },
   shadcn: {
     /**
      * Prefix for all the imported component
      */
-    prefix: '',
+    prefix: "",
     /**
      * Directory that the component lives in.
      * @default "./components/ui"
      */
-    componentDir: './components/ui'
+    componentDir: "./components/ui",
   },
   nitro: {
     experimental: {
-      websocket: true
-    }
+      websocket: true,
+    },
   },
   clerk: {
     appearance: {
-      theme: shadcn
-    }
-  }
-})
+      theme: shadcn,
+    },
+  },
+});

package.json

@@ -12,7 +12,6 @@
     "db:migrate": "drizzle-kit generate && drizzle-kit migrate"
   },
   "dependencies": {
-    "@catppuccin/vscode": "^3.18.1",
     "@clerk/nuxt": "^1.13.10",
     "@clerk/themes": "^2.4.46",
     "@neondatabase/serverless": "^1.0.2",
@@ -24,7 +23,8 @@
     "dotenv": "^17.2.3",
     "drizzle-orm": "^0.45.1",
     "lucide-vue-next": "^0.548.0",
-    "nuxt": "^4.2.0",
+    "monaco-editor": "^0.55.1",
+    "nuxt": "^4.2.1",
     "nuxt-monaco-editor": "^1.4.0",
     "pinia": "^3.0.3",
     "reka-ui": "^2.6.0",
@@ -46,5 +46,12 @@
     "nuxt-cron": "^1.8.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.3"
+  },
+  "pnpm": {
+    "overrides": {
+      "@vue/devtools-applet": "^8.0.3",
+      "@vue/devtools-core": "^8.0.3",
+      "@vue/devtools-kit": "^8.0.3"
+    }
   }
 }