I’m building a small “newsroom” application where Django handles the backend (API, authentication, admin) and Vue 3 handles the frontend UI. I’m still fairly new to combining Django with a modern JavaScript framework, and I’m running into questions about the correct project structure.
My goal is:
Django provides a REST API
Vue 3 (with Vite) is the standalone frontend
The frontend and backend will be deployed separately later
Local development should be simple, with minimal configuration
Right now my folder structure looks like this:
newsroom/
backend/
manage.py
newsroom/
settings.py
urls.py
articles/
models.py
views.py
serializers.py
frontend/
src/
vite.config.js
package.json
I’m unsure if this is considered a good pattern or if there are better ways to organize a Django + Vue project where the frontend is completely decoupled. I also want to make sure this structure won’t cause problems when I start working with authentication and serving the built Vue files in production.
My questions:
Is this a clean and maintainable structure for a Django + Vue 3 project, or should the frontend be inside the Django project folder?
When deploying, is it better to serve Vue separately as its own static site, or build the Vue app and let Django serve the compiled files?
Are there any common pitfalls when using Django REST Framework with a Vite-based Vue frontend (CORS, static files, routing, etc.) that I should prepare for early?
I’ve read several articles but most of them use older setups (Webpack, or Vue inside Django templates), so I’m hoping for advice based on current best practices with Django REST + Vue 3 + Vite.
