Skip to main content

Admin Pages

Creating & Editing Peak Admin Pages​

When working with Peak’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?​

Peak 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. Peak’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 Peak 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, Peak 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 Peak 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.

Feel free to dive in and customize your Peak admin experience exactly how you want it — with no fear of breaking the core, and with updates still easy to apply!

If you want, I can help you with examples or further tips on customizing specific admin pages. Just ask! 😄

How’s that? Would you like me to add sample commands for copying or a quick example next?