Vue 3 (Vite) Cookiecutter Django jumpstarts a production-ready, developer-friendly Django + Vue project quickly. Have the best of both front-ends by mounting Vue components directly into Django Templates.
Read the companion article Django + Vue + Vite: REST Not Required, which explains the techniques used in this cookiecutter.
First, get Cookiecutter. Trust me, it's awesome:
$ pip install "cookiecutter>=1.7.0"
Now run it against this repo:
$ cookiecutter https://github.com/ilikerobots/cookiecutter-vue-django
You'll be prompted for some values. Provide them, then a Django project will be created for you.
For more instructions, see upstream cookiecutter-django
If you have enabled docker in your cookiecutter configuration, then the Vite dev server will automatically run with the local configuration:
docker compose -f local.yml build
docker compose -f local.yml up
If for any reason you wish to build a static build on the local docker configuration, you may run:
docker-compose -f local.yml run vite vite build
The Vite dev server may be run from PyCharm using the pre-built run configurations. First, ensure that
PyCharm project's Node interpreter is properly set (Languages & Frameworks -> Node.js), then run the run
configuration named npm install
. After that, run the configuration named vite dev
to launch Vite dev server.
From your project directory:
cd vue_frontend
npm install
npm run dev
For production deployment, the Vue frontend must be built into static resources, which will be served
using the same Django staticfiles strategy as the rest of your site. If using docker, this step is included
in the production configuration. If not using Docker, then you must include the Vite build step into your
build/deploy process (see below). Note this must be done before the collectstatic
management task is run.
The setting VUE_FRONTEND_USE_DEV_SERVER
dictates whether your Django app will be expecting to serve Vue assets from
the Vite Dev Server or from a static build. This setting defaults to the same as DEBUG
.
The production docker configuration includes the Vite build step automatically when the images are built.
Assuming you have enabled pycharm support, then simply run the vite build
run configuration.
From the vue_frontend
directory:
npm run build
Powered by Cookiecutter. There is also an older, outdated Webpack version of this cookiecutter.