Skip to main content

Admin Pages

Creating & Editing SleekSaaS Admin Pages​

When working with SleekSaaS’s admin panel, you’ll quickly notice that many parts of the admin interface—like cards, widgets, and menus—are dynamic. This is great news because it means you can easily extend and add to them without ever touching the core Vue files directly. We’ve covered how to do that in other docs ([placeholder for cards doc], [placeholder for widgets doc], [placeholder for menus doc]), so definitely check those out if you haven’t already.

But what about the other admin pages?​

SleekSaaS is not a full framework, so it doesn’t allow complete extensibility for every single admin page out of the box. However, we made sure you can still customize and edit admin pages quite easily.

How?​

All the admin pages live inside this folder inside the Peak package:

peak/resources/js/Pages/Admin

For example, say you want to customize the main admin pages index at:

peak/resources/js/Pages/Admin/Pages/Index.vue

You don’t have to edit that file directly! Instead, just copy the entire folder structure you want to customize into your own main app’s resource folder like this:

resources/js/Pages/Admin/Pages/Index.vue

Once copied, you can edit the file(s) freely. SleekSaaS’s internal resolver will automatically override the original admin pages with your customized version — without ever touching the core package files.

Why is this cool?​

  • It keeps the SleekSaaS package clean and updatable.
  • You get full control over your admin pages.
  • It’s easy to track and manage your customizations separately.

Important: Aliases​

Inside your project’s webpack or Vite config, SleekSaaS uses these alias paths internally:

"@": path.resolve(__dirname, "resources/js"),
"@peak": path.resolve(__dirname, "peak/resources/js"),

This means:

  • "@" refers to your app’s main resources/js folder (where you put your customized admin pages).
  • "@peak" points to the original SleekSaaS package’s resources/js folder.

When you override a page by placing it in your main app folder, imports using "@" will use your customized code instead of Peak’s default.

Quick Recap​

  • Dynamic admin parts like cards, widgets, and menus → extendable without touching core (see other docs).
  • Static admin pages → copy from peak/resources/js/Pages/Admin → paste into your resources/js/Pages/Admin → edit freely.
  • The copied pages override the originals seamlessly.
  • Use the aliases to import your resources confidently.