This is a template for how to integrate Vue.js into Django.
- For the frontend, it uses Vite as the compiler and is written with the Composition API. It includes frontend routing via Vue Router and state management via Vuex.
- For the backend, it uses Django Rest Framework.
Download Docker Desktop. Then, clone this repository down to your local computer.
Run these commands to build the Docker image and start a container serving at http://127.0.0.1:8000/:
docker build --file Dockerfile --tag django-vue . # Note: This will take a while...
docker run --volume /Users/john.tran/Development/django-vue:/code --publish 8000:8000 --name django_vue django-vue # Point volume to your local repo directory
If you want to SSH into the running container, issue:
docker exec -ti django_vue bash # CTRL + D to exit
You can run commands such as python manage.py showmigrations
, python manage.py shell
, etc.
When you are finished, stop the container and remove the image by typing in a separate terminal tab or window:
docker container rm --force django_vue
docker rmi django-vue
When you first run the project, if you get an error like:
sh: 1: watch: not found
...
...
...
BrokenPipeError: [Errno 32] Broken pipe
then this is due to a volume syncing error. Basically your local directory (which does not have /node_modules
) is overwriting the container directory, which has /node_modules
installed from the Dockerfile.
To fix this:
- Edit the last line of the Dockerfile to
ENTRYPOINT ["sleep", "infinity"]
. - Remove the existing container and image using the commands above:
docker container rm ...
anddocker rmi ...
. - Rebuild the container again using the command above:
docker build ...
- Rerun the container again using the command above:
docker run ...
. - Open a separate terminal and shell into the running container using the command above:
docker exec ...
. - Run
npm install
inside the container.
The volume ("bind") mount should pick up /node_modules
and dump it back in your local directory.
- Change the Dockerfile back to
ENTRYPOINT ["npm", "run", "localhost"]
. - Remove, rebuild, and rerun the container using the commands above.