DEV Community

Tawhidur Noor
Tawhidur Noor

Posted on

Best Way to Use Separate CSS/JS for Frontend and Admin in a Single Vue 3 Project?

Hey folks,

I’m working on a Vue 3 app where I have both a public frontend and an admin panel, each with totally different designs. So, I need to load different CSS/JS files for each one.

I’ve created separate layouts and route groups for frontend and admin, but I’m running into these issues:

Frontend CSS is still active when I visit admin routes.

If I import admin JS/CSS inside the layout, sometimes the page goes blank.

It’s not clear where the best place is to import layout-specific assets.

My questions:
What’s the best practice for separating frontend and admin assets?

Where should I put these files (src/assets/...)? And how should I import them?

Should I consider creating two separate apps?

I’m using Vue 3 with Vue Router and Vite.

Would really appreciate some guidance or examples!

Top comments (0)