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
.envfiles
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