AgencyOS - IDE Debugging Setup

Help
1

Hello, Niko here! I’m a UX designer with a background in computer science. I’m taking my first steps with Directus, Nuxt, Vue, and Agency OS to build my personal website and get familiar with these tools.

I initially tried accessing the Discord community, then switched here since I believe it has migrated to this forum (perhaps the README.md should be updated accordingly: GitHub - directus-labs/agency-os: The open source operating system for digital agencies. Built with Directus and Nuxt.).

I’ve configured the Directus Docker instance, set up the Agency OS template, and started editing some sections from the admin panel — everything seems to be working smoothly so far.

However, the theme setup under the Globals section isn’t entirely clear to me. I found this open issue (Build issues with globals.title and globals.theme · Issue #126 · directus-labs/agency-os · GitHub) and tried modifying the file as suggested. Some changes, like colors, seem to work, while others, like font families, do not (maybe they need to be installed othewise it switches to the default theme).

I’d like to debug the code to better understand how the theme setup works under the hood. Which IDE would you recommend? I’m currently trying Cursor, but it seems that breakpoints aren’t working out of the box. What’s the optimal setup in your opinion?

2

Heyo :waving_hand: Welcome to the community Niko!

Sidestepping the question here I know :wink: - but if you’re working on a personal website - I’ll highly recommend starting with our CMS template first.

If you’re already got Docker installed and running - stop the AgencyOS container and just run

npx directus-template-cli@latest init

Choose the CMS template and pick Nuxt as your framework if that’s the frontend you prefer.

AgencyOS is really packed with a bunch of extras that may just be overkill for a personal site.

Back to your question,

As of today, Thursday, Jun 12, 2025 - AgencyOS runs the older version of Nuxt UI for the UI components. You might have to restart the dev server to see changes take place. So it’s maybe not a you issue.

Cursor is a fork of VSCode, so you could certainly try VSCode if you don’t like Cursor. Or Zed is another alternative that’s quite a bit different.

Personally I’m using Cursor 80% of the time now.

3

I made some other tests in cursor, if I put a “debugger” statement it seems to stop on the code, otherwise it ignores the breakpoints, it seems that the sourcemap gets not loaded correctly for some reason… do you usually configure a specific launch.json file? Or put something specific in your next.config.ts file? Thank you in advance!

EDIT: solved by configuring the launch.json and nuxt.config.ts files as following: Debugging · Nuxt Advanced v3
Then launching npm run dev from the Javascript Debug Terminal inside Cursor (instead of the normal one)