This project template integrates Vue3 with the Django Rest Framework. The example project does nothing useful, but should help starting a modern web project without having to manually set up a usable development entvironment.
- Django
- JWT authentication
- Vite
- Vue3
- Tailwind CSS
- Environment configuration with
.env
files
The project can run either in development or in production mode.
For development, run make
and npm run dev
simultaneously, and head over to
http://localhost:3000
. make
will spin up the DRF backend in debug mode,
npm run dev
starts the Vue frontend in developer mode (with hot replacement).
For a frontend production build, run make dist
, then VITE_DEBUG=False make
and open http://localhost:8000
. In this mode, the backend still runs in
DEBUG
mode, but the frontend does not.
For deployment, run npm run build
, and then ./manage.py collectstatic
,
and deploy the result like any other Django app.
The production frontend build is deployed as Django static files.
If these should reside in a different place than /static/
,
the settings in vite.config.js
and settings.py
need adjustment.
- Vue3 and Vite by Evan You
- Django by the Django software foundation
- Django Rest framework by Encode
- The site theme is based on a template by Tailwind toolbox
- UI furniture is based on Vue Tailwind
- CSS magic courtesy of Tailwind CSS
- Artwork by Katerina Limpitsouni