Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
This branch is 5 commits ahead, 17 commits behind cookiecutter:master.

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Cookiecutter Vue3 + Vite + Django

Build Status Code style: black

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.

Powered by Cookiecutter.

Note: There is also an older, outdated Webpack version of this cookiecutter.


  • Harmonious integration of Django Templates and Vue 3
  • Vue Single File Components (SFCs)
  • Vite-based build
  • Lightning fast Hot Module Replacement (HMR) for Vue components
  • Pinia state management, shared among any components on the same template
  • Persistent state across page loads
  • Pass data from Django to Vue
    • Property passing from Template -> Root Vue Component
    • Provide/Inject from Template -> Vue
    • "Django Slots" to pass arbitrary HTML to Vue components
  • Vue devtools support
  • Sass/SCSS pre-compilation of Vue Components
  • Chunked resource loading
  • Teleport Vue components across Django templates
  • All the features of the amazing cookiecutter-django


First, get Cookiecutter. Trust me, it's awesome:

$ pip install "cookiecutter>=1.7.0"

Now run it against this repo:

$ cookiecutter

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

Running the Vite Dev server

With Docker

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

With PyCharm

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 the console

From your project directory:

cd vue_frontend
npm install
npm run dev

Static Vite Builds

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.

With Docker

The production docker configuration includes the Vite build step automatically when the images are built.

With Pycharm

Assuming you have enabled pycharm support, then simply run the vite build run configuration.

From the console

From the vue_frontend directory:

npm run build


Vue 3 + Vite + Django with no compromises. Use Vue SFCs directly in Django Templates, DRF not required.




Code of conduct





No packages published


  • Python 63.0%
  • HTML 11.7%
  • Vue 6.8%
  • Shell 6.7%
  • JavaScript 5.2%
  • Dockerfile 4.1%
  • Other 2.5%